DropDownList with Server Filtering on Bootstrap Modal

[Paul]

Hi there,

We are using Q2 2014 MVC official release and are having an issue with filtering on a dropdownlist when this is on a Twitter Bootstrap modal.

Code sample:

Editor Template:

@model string

@(Html.Kendo().DropDownListFor(m => m)
    .DataTextField("Username")
    .DataValueField("UserDetailId")
    .OptionLabel("-- Please select --")
    .Filter("contains")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("Search", "User", new { area = "Search" });

        })
       .ServerFiltering(true);
    })
)

Modal form:

@model SelectUserModel

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title">Select User</h4>
</div>

@using (Html.BeginForm())
{
    if (Html.ViewData.ModelState.Any(m => m.Key == string.Empty))
    {
        <div class="row">
            <div class="form-group col-md-12 alert alert-danger">Error:@Html.ValidationSummary()</div>
        </div>
    }

    <div class="modal-body">
        <div class="form-vertical">
            <div class="row">
                <div class="form-group">
                    <div class="col-md-6 ">
                        @Html.LabelFor(model => model.UserDetailId)
                        @Html.EditorFor(model => model.UserDetailId)
                        @Html.ValidationMessageFor(model => model.UserDetailId)
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        @Html.SubmitButton()
        @Html.ModalCancelButton()
    </div>
}

The dropdownlist renders correctly and works fine in Chrome and Firefox. However, in IE 9-11 the dropdown opens when the arrow is clicked but immediately closes again.

Any ideas?

Thanks,

Paul

[Paul]

I should add - displaying a normal dropdownlist without filtering is fine across all browsers.

[Georgi Krustev]

Hello Paul,

There is a known issue in Q2 2014 release of Telerik UI for ASP.NET MVC related to DropDownList and newest versions of IE10 and IE11 (in several months they received new updates). Here you can find more information about the problem (last post). What I would suggest you is download the latest internal build of Telerik UI for ASP.NET MVC and give it a try. Let me know if the problem still persists.

Regards,
Georgi Krustev
Telerik

 

 

[Paul]

Hi Georgi,

I will try this - however, the issue you link to is different from the behaviour I'm getting - with my issue, the dropdown opens and then immediately disappears without me clicking on the scrollbar or anything else.

This also only happens when the following conditions are met:
- the dropdownlist is on a Twitter bootstrap modal
- server filtering is being used with a read method
- in IE 9,10 and 11

I will download the latest internal build and give this a try but this issue seems to have fairly different characteristics to the post you linked to.

Thanks,

Paul.

[Georgi Krustev]

Hi Paul,

Thanks for the clarification! The described behavior is really different from the one mentioned in the related forum thread. The issue you are experiencing seems to be caused by the Twitter bootstrap modal window itself, as it does not allow focus in elements outside of the window. The input element required for filtering is in the popup element, which is appended in the end of document.body, hence modal window suppresses the focus. Here is another thread devoted on the same problem. Try the workaround given in StackOverflow site and let me know if the issue still persists.

Regards,
Georgi Krustev
Telerik

 

 

[Paul]

Hi there,

Just to confirm this approach did indeed resolve the problem - as we were using Boostrap 3 this was the solution:

$('#myModal').on('shown.bs.modal', function() {
    $(document).off('focusin.modal');
});

Thanks,

Paul

[Ori]

The problem exists on 2017.1.118 as well, your code snippet fixed the problem for us too. Thanks!

[Dan]

The problem exists on 2017.2.621 as well. Thanks for the code snippet which resolved the issue.

[Duncan]

The following fixes the kendo popup fight without making all inputs tab targets

$.fn.modal.Constructor.prototype.enforceFocus = function () {
   $(document)
        .off('focusin.bs.modal') // guard against infinite focus loop
        .on('focusin.bs.modal', $.proxy(function (e) {
            if (document !== e.target &&
                this.$element[0] !== e.target &&
                !this.$element.has(e.target).length &&
                !$(e.target).closest(".k-popup").is(":visible")) {
                this.$element.trigger('focus')
            }
        }, this))
}