DropDownList issue on IE 11

[nravhadParticipant]

HI,
We are using jQWidget304 version. Application is running fine in IE 8 and google crome. But when we tested it on IE 11 its dropdownList is not working properly. Issue is when I click on textbox the dropdownlist appears and when I hovour the mouse on dropdownlist its getting invisible or hidden..not sure what is the issue.
Code sample is as follows.

<div id=”assetTypeContainer”>
<input type=’text’ id=”dropdownProductBtn” style=’width: 500px; font-size: 11px; font-family: Verdana;’ onClick=”this.select();” onfocus=’javascript:productTables.showMenu()’ onkeyup=’javascript:productTables.filterMenu()’/>



 <div id=”dropdownProduct” onblur=’javascript:productTables.closeMenu()’></div>
</div>`

productTables.showMenu = function () {
        $("#dropdownProduct").css({
            'visibility': 'visible',
            'display': 'block',
            'position': 'absolute',
            'z-index': '999'
        });
    };

var source =
{
datatype: “json”,
datafields: prodHierarchyFields,
id: ‘id’,
url: dfGlobals.webroot + “Product/GetProductsHierarchy”,
async: false
};
// create data adapter.
var dataAdapter = new $.jqx.dataAdapter(source);

// perform Data Binding.
dataAdapter.dataBind();
dfGlobals.productData = dataAdapter.records;

var records = dataAdapter.getRecordsHierarchy(‘id’, ‘parentid’, ‘items’, [{ name: ‘text’, map: ‘label’}]);

$(‘#dropdownProduct’).jqxMenu({ source: records, mode: ‘vertical’, theme: dfGlobals.theme, width: ‘200px’ });
$(“#dropdownProduct”).css({ ‘visibility’: ‘hidden’, ‘display’: ‘none’ });

$(“#dropdownProduct”).on(‘itemclick’, function (event) {
if (isChild(dataAdapter.records, event.args.id)) {

$(“#dropdownProduct”).css({ ‘visibility’: ‘hidden’, ‘display’: ‘none’ });
$(“input#dropdownProductBtn”).val($(event.args).text());
$(“input#dropdownProductBtn”).addClass(“productClass”);
dfGlobals.selProductId = event.args.id;
var items = [];
items = $.grep(dfGlobals.productData, function (element, index) {
var flag = (element[‘id’] && element[‘id’] == event.args.id);
return flag;
});

if (items && items.length > 0) {

dfGlobals.selectedProduct = items[0];
dfGlobals.selTaxonomyId = items[0].taxonomyFlagId;

if (productCheck.enableVolSEF()) {
$(‘#volSEF’).jqxCheckBox(‘enable’);
} else {
$(‘#volSEF’).jqxCheckBox(‘uncheck’);
$(‘#volSEF’).jqxCheckBox(‘disable’);
}

if (productCheck.enableClearing()) {
$(‘#cleared’).jqxCheckBox(‘enable’);
} else {
$(‘#cleared’).jqxCheckBox(‘uncheck’);
$(‘#cleared’).jqxCheckBox(‘disable’);
}

if (productCheck.enableMandatorySEF()) {
$(‘#matSEF’).jqxCheckBox(‘enable’);
} else {
$(‘#matSEF’).jqxCheckBox(‘uncheck’);
$(‘#matSEF’).jqxCheckBox(‘disable’);
}
if (!$(“#cleared”).jqxCheckBox(‘checked’)) {
$(‘#segIA’).jqxCheckBox(‘enable’);
} else {
$(‘#segIA’).jqxCheckBox(‘disable’);
}
}
displayProduct();
}
});

$(“#dropdownAssetType”).jqxDropDownList({
selectedIndex: -1,
source: dataAdapters.AssetClass,
displayMember: “text”,
valueMember: “id”,
autoDropDownHeight: true,
width: 170,
dropDownWidth: 210,
height: 20,
theme: dfGlobals.theme
}).bind(‘select’, function (event) {
$(“#jqxgridProductsIn”).fadeTo(“fast”, 0.2);
var assetId = event.args.item ? event.args.item.value : “-1”;
if (dfGlobals.selProduct.length > 0) {
dfGlobals.selProduct.splice(0, dfGlobals.selProduct.length);
}

var products = $.grep(dfGlobals.productData, function (element, index) {
return (element[‘level1’] == assetId && element[‘isLeaf’]);
});

$.each(products, function (index, value) {
dfGlobals.selProduct.push(value);
});
`

[HristoParticipant]

Hello nravhad,

We recommend to use latest version of jQWidgets.
Please, send Your code in (https://www.jseditor.io/ or https://fiddle.jshell.net/) if you still have same issue.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[nravhadParticipant]

Hi Hristo,
Please visit the following link to see the code..
https://www.jseditor.io/?key=dropdown-issue-1

I could not go for latest version only for dropdown issue as it is not a feasible because other jQWidgets components are working fine on IE 11.
Could you please help on the existing scenario.

Thanks,
Nilesh

[nravhadParticipant]

Hi Hristo,

I found the root cause for this issue. I have a closeMenu function which I am calling on the focusOut event of the dropdownProductBtn which shows the dropdown on its click.
Below is my HTML.
<input type='text' id="dropdownProductBtn" style='width: 500px; font-size: 11px; font-family: Verdana;' onClick="this.select();" onfocus='javascript:productTables.showMenu()' onkeyup='javascript:productTables.filterMenu()'/>
The root cause is that CloseMenu function is getting called on its onClick event of dropdownProductBtn not sure how and why. If I disable that event Its resolves the issue but causing other functionality breaks.
Could you please help how I can disable the closeMenu event on dropdownProductBtn click.
Below is my JS.

productTables.showMenu = function () {
        $("#dropdownProduct").css({
            'visibility': 'visible',
            'display': 'block',
            'position': 'absolute',
            'z-index': '999'
        });
    };

$("input#dropdownProductBtn").on('focusout', function () {
            actiondata.getEMIRMCEligProductDetails();
            productTables.closeMenu();
        });

productTables.closeMenu = function () {
        $("#dropdownProduct").css({ 'visibility': 'hidden', 'display': 'none' });
    };

[HristoParticipant]

Hello nravhad,

Please, provide us example that is contain only Menu (as much as possible – small code size with jqxMenu) to demonstrate this issue.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts