IE11 - Dropdownlist closes after initial expand

[Bob]

Hi, I am not sure if I am having exact same problem as other post "Drop down's not working in IE11" but you locked it so I can't reply to it.

Anyways, in IE11 sometimes on initial click of a DropDownList, the list auto-closes.  Then it works fine afterwards.  I switched to combobox for testing purposes and it does not have the same behavior.  Firefox and Chrome are both fine.  I cannot reproduce in demo though.  Any ideas?  Our code freeze for next release is fast approaching so I would prefer a work-around or hack if possible.  Otherwise, I may have to hack combobox control to replace this.

[Georgi Krustev]

Hello Bob,

The described problem is not a known issue. Would be possible to provide specific steps that will help us to replicate the problem locally? A runnable test project also will very helpful.

Regards,
Georgi Krustev
Telerik

 

 

[Bob]

I figured this one out.  I was referencing jQuery 1.8 instead of the jQuery file bundled with Kendo (1.9).  Then I had another issue caused by jQuery Validation so I updated to latest version of that.  Now all is good.  Thanks for reply though.

[Admin]

We're seeing this issue in our project, though we are running the latest Kendo Release (2015 SP2) and JQuery 1.10.1.

[Georgi Krustev]

Hello,

Would it be possible to send us a repro demo and/or screencast that demonstrate the depicted issue? Could you try to replicate the issue using our online demos?

Any additional information will be helpful the narrow the issue down.

Regards,
Georgi Krustev
Telerik

 

 

[Admin]

Hi

The attached video shows the issue. It doesn't happen on every page, but there appears to be no difference between the way we use the dropdown here and elsewhere. This only happens in IE11.

We were previously on a 2013 release of Kendo and Jquery 1.10 and dindn't have this issue. We upgraded to 2015 Q1, then then to 2015 Q1 SP2, and have had this issue since the initial upgrade.

I'm not really in a position to give you a code sample unfortunately.

Thanks

Andy

[Admin]

We're having a similar issue with the Kendo menu control. Very briefly after page load all the menu items expand to show the submenus. They instantly roll back up so only the top level menu items are visible. We're using the below code to create the menus and again, it was fine before the Kendo upgrades mentioned above.

 return htmlHelper.Kendo()
                                .Menu()
                                .Name(name)
                                .Events(events => events.Select(selectFunction))
                                .BindTo(assetFoldersHiearchy,
                                        mappings => mappings.For<AssetFolderViewModel>(binding => binding.ItemDataBound((item, folder) =>
                                        {
                                            item.Text = folder.Description;
                                            item.HtmlAttributes.Add(CommonConstants.Id.ToLower(), folder.Id);
                                        })
                                        .Children(folder => folder.SubFolders)));

[Georgi Krustev]

Hello Andy,

Thank you for the screencast. It shows the issue, but unfortunately I couldn't replicate the issue in IE11 using our online demos. The exact version of IE is 11.0.9600.17498 (in some cases particular update breaks the widgets).

Would it be possible to share at least the structure of the page? This will help us to try to build a separate project in out attempt to replicate the issue.

Regards,
Georgi Krustev
Telerik

 

 

[Admin]

Hi Georgi

 

Here's a sample of the HTML:

 <div class="box-inner-content">
    <div>      
         <div class="input-form">
            <div class="input-row">
                <span class="input-label">Select Value</span>
                <span class="error-asterisk">*</span>
                <div class="input-control">
                    @(Html.Kendo().DropDownListFor(model => model.SelectedValue2)
                    .OptionLabel("Select...")
                    .BindTo(Model.Items))
                </div>
            </div>
        </div>            
    </div>
</div>

.input-form .input-row .input-control {
    width: 50%;
    float: right;        
    padding-left: 4px;
    background-color: #fff;
    min-height: 25px;    
}

 The float right appears to be causing the issue, as the drop down behaves as expected if it's removed or changed to a value other than right. However, that then breaks our form layout. There appears to be no reason for the float to cause an issue, but it does seem to.

Thanks
Andy

[Georgi Krustev]

Hello Andy,

There should be something additional to the mentioned CSS, because with "stripped" demo, the widget still works just fine on my end (screencast). Here is the Dojo demo used in the tests:

• http://runner.telerik.io/fullscreen/@ggkrustev/ORegI

Do you reproduce the issue using this demo? Would it be possible to modify it to show the issue?

Regards,
Georgi Krustev
Telerik