Filtering on Bootstrap Modal

[Rodrigo]

Hi, i'm using a DropDownList widget inside a Bootstrap 4 modal. While trying to filter, the cursor doesn't show up nor can click on the input textbox for typing.

But, if i take out the DropDownList form the modal and use it on the body, works just fine, wich allows to type and filter:

I'm suspecting the problem is about the modal's z-index wich might be higher than the DropDownList widget. As explained here, i tried to change the z-Index but didn't work.

https://ej2.syncfusion.com/documentation/api/drop-down-list/#zindex

But made no difference:

Using Bootstrap 4 and Syncfusion MVC EJ2 18.4.0.49. Already tried on newerversion, but problem still happens.

Thank you very much.

[Sureshkumar P]

HI Rodrigo, 

 

We suggest you remove the model focus by using the below code to get rid of the facing issue. 

 

Find the code example: 

@using Syncfusion.EJ2; 

@using Syncfusion.EJ2.Inputs; 

@using Syncfusion.EJ2.DropDowns; 

@using Newtonsoft.Json 

 

<!-- Button trigger modal --> 

<button type="button" class="btn btn-primary" id="button" data-toggle="modal" data-target="#BootstrapModal"> 

    Launch demo modal 

</button> 

 

<!-- Modal --> 

<div class="modal fade" id="BootstrapModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> 

    <div class="modal-dialog"> 

        <div class="modal-content"> 

            <div class="modal-header"> 

                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 

                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 

                    <span aria-hidden="true">&times;</span> 

                </button> 

            </div> 

            <div class="modal-body"> 

                @Html.EJS().DropDownList("vegetables").AllowFiltering(true).Placeholder("Select a Vegetables").PopupHeight("200px").DataSource((IEnumerable<object>)ViewBag.data).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Value = "Vegetable" }).Render() 

            </div> 

            <div class="modal-footer"> 

                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 

                <button type="button" class="btn btn-primary">Save changes</button> 

            </div> 

        </div> 

    </div> 

</div> 

 

<script type="text/javascript"> 

        function onfiltering(e) { 

            var query = new ej.data.Query(); 

            query = (e.text !== '') ? query.where('Name', 'startswith', e.text, true) : query; 

            e.updateData(@Html.Raw(JsonConvert.SerializeObject(ViewBag.data)), query); 

    } 

 

    $(function () { 

        $('#BootstrapModal').on('shown.bs.modal', function () { 

            $(document).off('focusin.modal'); 

        }); 

    }) 

 

</script> 

 

 

 

Regards, 

Sureshkumar P 

[Rodrigo]

Hi Sureshkumar, it worked great!

Thank you!

[Sureshkumar P]

Rodrigo, 

 

Thanks for your update. 

 

Regards, 

Sureshkumar P