Yii 2 kartik dialog.prompt with input type textarea

Question

I have a button that triggers a kartik dialog.prompt, where text is put in. I need the input in the dialog to have several rows and line breaking capability (like textarea)

How to change it from a simple text input to textarea?

Here is my javascript:

$("#bulk-email-button-invitations").on("click", function() {
    var grid = $("#invitations");
    var keys = grid.yiiGridView('getSelectedRows');

    if (keys.length >= 1){
    krajeeDialog.prompt({label:'Text emailu:', placeholder:'Zadejte text emailu'}, function (result) {
        if (result) {
            $(location).attr('href', '/educational-event-invitation/bulk-email?' + $.param({invitations: keys, text: result}));
        } else {
            krajeeDialog.alert('Text emailu nesmí být prázdný!');
        }
    });
    }else{
        krajeeDialog.alert("Nejprve vyberte studenty, kterým chcete poslat email!")
   }
});

I found that if type is not defined (unlike label and placeholder in my case), it defaults to "text". But I wasn't able to make the dialog render any type other than a simple one-row text input.

Answer 1

Apparently, this is not supported in the extension.

Reason:

The reason is that in the dialog.js where the KrajeeDialog.prototype is defined the function bdPrompt is the one that takes care of the prompt dialog that is to be created and it creates the default field type as input rather than deciding on any of the options or parameters passed to KrajeeDialog.prompt() although you can pass a parameter of name type like

krajeeDialog.prompt({
  label:'Text emailu:', 
  placeholder:'Zadejte text emailu',
  type:'password'
},function(){})

but this does not decide if the element will be input or textarea type, this parameter type is passed as the attribute of the input element. See the below code block to understand the reason i explained the third line will always create a field of type input.

File yii2-dialog/assets/js/dialog.js Line 110

if (typeof input === "object") {
    $inputDiv = $(document.createElement('div'));
    $input = $(document.createElement('input'));
    if (input['name'] === undefined) {
        $input.attr('name', 'krajee-dialog-prompt');
    }
    if (input['type'] === undefined) {
        $input.attr('type', 'text');
    }
    if (input['class'] === undefined) {
        $input.addClass('form-control');
    }
    $.each(input, function(key, val) {
        if (key !== 'label') {
            $input.attr(key, val);
        }
    });
    if (input.label !== undefined) {
        msg = '<label for="' + $input.attr('name') + '" class="control-label">' + input.label + '</label>';
    }
    $inputDiv.append($input);
    msg += $inputDiv.html();
    $input.remove();
    $inputDiv.remove();
} else {
    msg = input;
}

So you might need to override the javascript function according to your needs if you want to work it that way.