Space bar not working in multiselect

[Ivett]

I am currently using a multiselect for, which populates the list by means of a datasource.

The problem is that when typing in the input is not taking empty spaces, even when typing the multiselect space bar does not take them, why could this happen?

[Ivett]

In the demo I can use this functionality, and checked the elements that used does not make any difference

http://demos.telerik.com/aspnet-mvc/multiselect/serverfiltering

 

[Anton]

Hello Yazmin,

Unfortunately I was not able to reproduce the problem I attached you the sample project I test with. As you can see on the video the multiselect values the 'space' upon typing. Is there anything else I should add in order to reproduce the problem?

Regards,
Anton
Telerik by Progress

[Alexander Jiménez]

Hello i know this is an old thread. But I found that it occures when you are using boostrap. Check the image attached. 

[Ivan Danchev]

Hello,

From the attached screenshot I can see you are nesting the MultiSelect in a form and I would assume it has the "form-control" class set through its HtmlAttributes configuration:

<form action="">
    <div class="form-group">
        <label for="email">Email address:</label>
        @(Html.Kendo().MultiSelect()
            .Name("email")
            .HtmlAttributes(new { @class = "form-control" })
            //... additional configuration
        )

I tested this scenario with bootstrap.min.js version 3.3.7 and 4.3.1, but was unable to reproduce the issue. Could you elaborate more on the bootstrap version you have noticed this behavior in, as well as the structure of the Html elements you nest the MutliSelect in.

Regards,
Ivan Danchev
Progress Telerik

[Alexander Jiménez]

Hello Ivan thanks for your replay, 

Im using boostrap 3.3.7 and KendoUI 2019.02.619

I create that form inside a KendoWindow, from a segment of HTML code.

<div id="wndAdvancedFilters" style="display:none;">
<div class="form-horizontal" id="frmAdvancedFilter">
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label" for="selIssuer">Emisor</label>
<div class="col-md-8">
<select id="IssuerName" name="IssuerName" multiple="multiple"></select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="selReceiver">Receptor</label>
<div class="col-md-8">
<select id="ReceiverNameSearch" name="ReceiverNameSearch" multiple="multiple"></select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Números de Factura</label>
<div class="col-md-8">                    
<textarea class="form-control" id="txaInvoiceNumberList" type="text"></textarea>
</div>
</div>
</fieldset>
</div>
</div>

JavaScript code to create the window:

    var wndAdvancedFilters = $("#wndAdvancedFilters").kendoWindow({
            width: 600,
            height: 250,
            title: "Filtros avanzados de búsqueda de facturas",
            visible: false,
            actions: [
                "Minimize",
                "Maximize",
                "Close"
            ]
        }).data("kendoWindow");


JavaScript code to create the Multiselect:
var RNS = $("#ReceiverNameSearch").kendoMultiSelect({
            minLength: 3,
            dataTextField: "Name",
            dataValueField: "pkReceiverId",
            autoBind: false,
            valuePrimitive: true,
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: function (options) {
                        $.ajax({
                            url: "../api/ReceiverSearch/Get/" + encodeURIComponent(RNS.input[0].value),
                            dataType: "json",
                            success: function (result) {
                                options.success(result);
                            },
                            error: function (result) {
                                options.error(result);
                            }
                        });

                        options.success({
                            data: [],
                            total: 0
                        });
                    }
                },
                schema: {
                    data: "data",
                    total: "total"
                }
            },
            select: function (e) {

            },
            change: function (e) {

            }
        }).data("kendoMultiSelect");

 

Code created by Kendo:

<div class="k-widget k-window" data-role="draggable" style="visibility: visible; display: flex; padding-top: 63px; min-width: 90px; min-height: 50px; width: 600px; height: 313px; top: 181px; left: 487px; z-index: 10004; opacity: 1;"><div class="k-window-titlebar k-header" style="margin-top: -63px;"><span class="k-window-title" id="wndAdvancedFilters_wnd_title">Filtros avanzados de búsqueda de facturas</span><div class="k-window-actions"><a role="button" href="#" class="k-button k-bare k-button-icon k-window-action" aria-label="window-Minimize"><span class="k-icon k-i-window-minimize"></span></a><a role="button" href="#" class="k-button k-bare k-button-icon k-window-action" aria-label="window-Maximize"><span class="k-icon k-i-window-maximize"></span></a><a role="button" href="#" class="k-button k-bare k-button-icon k-window-action" aria-label="Close"><span class="k-icon k-i-close"></span></a></div></div><div id="wndAdvancedFilters" style="" data-role="window" class="k-window-content k-content" tabindex="0" role="dialog" aria-labelledby="wndAdvancedFilters_wnd_title">
    <div class="form-horizontal" id="frmAdvancedFilter">
        <fieldset>
            <div class="form-group">
                <label class="col-md-4 control-label" for="selIssuer">Emisor</label>
                <div class="col-md-8">
                    <div class="k-widget k-multiselect k-multiselect-clearable k-state-hover" unselectable="on" title="" style=""><div class="k-multiselect-wrap k-floatwrap" role="listbox" unselectable="on"><ul unselectable="on" class="k-reset" id="IssuerName_taglist"></ul><input class="k-input k-readonly" style="width: 41px;" accesskey="" autocomplete="disabled" role="listbox" title="" aria-expanded="false" aria-haspopup="listbox" aria-autocomplete="list" tabindex="0" aria-describedby="IssuerName_taglist" aria-disabled="false" aria-busy="false"><span unselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span><span class="k-icon k-i-loading k-hidden"></span><span style="font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 14px; font-stretch: 100%; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 20px; position: absolute; visibility: hidden; top: -3333px; left: -3333px;"></span></div><select id="IssuerName" name="IssuerName" multiple="multiple" data-role="multiselect" aria-disabled="false" style="display: none;"><option value="979fa93e-ddc5-440f-97ba-0ad6171b2c53">Ariel Josue Gutierrez Roque(116040799)</option><option value="2bcacdc5-529d-4023-b62f-23fa9657ab5d">Groupware Technology Consulting S.A.(3101257545)</option><option value="0a26f238-a0b8-4337-b84b-42341815ecb9">Genesis Leiyann Araya Solis(116410572)</option><option value="b20a2b14-ce30-42b6-885d-439af66395f8">TeleCable S.A.(3101336262)</option><option value="e42aa3b7-8ad5-4d10-ae42-4c10ddc7afc1">Marco Jimenez(901060696)</option><option value="15802cb3-a844-41a6-bc7c-6794defce1fd">Solution M y T SA(310168187_)</option><option value="41090bdd-4f53-4ca0-8ded-776bb74f64fd">Alexander Jimenez(112630859)</option><option value="6d847964-c5ac-434c-8593-85b6d3fbe9d8">444444444444444(777777775)</option><option value="8d77e7b1-69b6-4a13-81f1-ab5d55eaaf84">3-102-523627 Ltda.(3102523627)</option><option value="db661f7e-b632-4fe6-a0a7-b0748bc0828d">Jonathan Solis Pereira(109520265)</option><option value="6509fcc2-ead8-4fe5-921f-b4a87d8e48bc">Juancito(112630857)</option><option value="88532828-b65e-414d-8d14-c97efe2fd9f7">Mario Sanchez Suarez(205460793)</option><option value="6c1256f4-5b1c-466c-96df-ccaafd903a0a">Margarita Gutierrez(502880060)</option><option value="78958b05-c177-47f1-9d3f-e65d878d9e15">Juancito(112630585)</option></select></div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label" for="selReceiver">Receptor</label>
                <div class="col-md-8">
                    <div class="k-widget k-multiselect k-multiselect-clearable" unselectable="on" title="" style=""><div class="k-multiselect-wrap k-floatwrap" role="listbox" unselectable="on"><ul unselectable="on" class="k-reset" id="ReceiverNameSearch_taglist"></ul><input class="k-input k-readonly" style="width: 41px;" accesskey="" autocomplete="disabled" role="listbox" title="" aria-expanded="false" aria-haspopup="listbox" aria-autocomplete="list" tabindex="0" aria-describedby="ReceiverNameSearch_taglist" aria-disabled="false"><span unselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span><span class="k-icon k-i-loading k-hidden"></span><span style="font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 14px; font-stretch: 100%; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 20px; position: absolute; visibility: hidden; top: -3333px; left: -3333px;"></span></div><select id="ReceiverNameSearch" name="ReceiverNameSearch" multiple="multiple" data-role="multiselect" aria-disabled="false" style="display: none;"></select></div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">Números de Factura</label>
                <div class="col-md-8">                    
                    <textarea class="form-control" id="txaInvoiceNumberList" type="text"></textarea>
                </div>
            </div>
        </fieldset>
    </div>
</div><div class="k-resize-handle k-resize-n" style="display: flex;"></div><div class="k-resize-handle k-resize-e" style="display: flex;"></div><div class="k-resize-handle k-resize-s" style="display: flex;"></div><div class="k-resize-handle k-resize-w" style="display: flex;"></div><div class="k-resize-handle k-resize-se" style="display: flex;"></div><div class="k-resize-handle k-resize-sw" style="display: flex;"></div><div class="k-resize-handle k-resize-ne" style="display: flex;"></div><div class="k-resize-handle k-resize-nw" style="display: flex;"></div></div>

 

[Alexander Jiménez]

I correction: I'm using boostrap 3.4.1 

[Ivan Danchev]

Alexander,

I added the Window's Html, the Window and the MultiSelect's initialization scripts to this dojo example and also the Kendo UI CSS files, which were missing from the attached page:

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.min.css">

The MultiSelect is bound to our sample demos service.

At my end entering "space" works as expected. For example, if you enter "Aniseed Syrup", the MultiSelect is properly filtered.

In the page you attached there are additional CSS and js files referenced, which I don't have access to, so this is one place you could look at. Remove any third party CSS and js, as in the dojo example I linked above, leaving only Kendo UI and Bootstrap's CSS and js. This could help in identifying what is interfering with the expected behavior of the widget.

Regards,
Ivan Danchev
Progress Telerik