CODEWITHSUNDEEP
javascriptjquery
anglimasS
anglimasS

Reputation: 1344

Chosen drop down previous options not hide in mobile

I am using chosen drop down fields and its working fine in desktop but in mobile previous drop down not hide so it seems all the drop down fields are open in mobile.

URL: https://mtest.hotcoursesabroad.com/demo-cont/hcindia/chk/ddchosen.html

help me if any one face same.

screenshot reference

Upvotes: 1

Views: 358

Answers (1)

Christos Lytras
Christos Lytras

Reputation: 37318

chosen:hiding_dropdown event does not trigger on a blur event. You'll have to trigger a chosen:close event inside chosen:showing_dropdown for each select excluding the one that triggers the event. Try the following code:

function chosen() {
  $(".chosen-select").chosen({
    disable_search_threshold: 100,
    inherit_select_classes: true,
    width: '100%'
  }).on('chosen:showing_dropdown', function (evt, params) {

    // Trigger a chosen:close event to all other chosen elements
    $(this).parent().parent().siblings().find('.chosen-select').trigger('chosen:close');

    $.js('custom-scroll').find(".chosen-results").niceScroll({
      cursorcolor:"#d1d1d1",
      cursorwidth:"10px",
      background:"#fff",
      cursorborder:"0px solid #eeeeee",
      cursorborderradius:0,
      cursoropacitymin:1,
    });
  });
}

Try my fix here.

Upvotes: 2

Related Questions