SumoSelect won't open after reload

Viewed 3685

I am using sumoselect on inputs in my web.

Problem is - if you open second sumoselect and after that you want open first -so click on first and he is not opening...

My code:

$('.country').SumoSelect({placeholder: 'first'});
$('.anotherSumo').SumoSelect({placeholder: 'second'});

$('.anotherSumo').on('sumo:closing', function(e) {

  $('.country').empty();
  $('.country').append('<option value="newValue">newValue</option>');
  $('.country')[0].sumo.reload({placeholder: 'first'});
});

Here is working fiddle. Just open second select and after that try open first - 2 clicks. In reversed order - first click to open first sumo and after that second click on second sumo is everything ok...

I was trying add $('country').trigger("click"); after reload but nothing

https://jsfiddle.net/eqa9og2v/5/

I need to know how to open first sumo on second click any way but with funcional trigger on sumoselect close - because first user make his choices and if is user done with selecting options he close sumoselect (with open another or only close)

3 Answers

I think the way you are trying to implement is not feasible and will not be possible to achieve because when you click on the 1st to open it, 2nd drop-down closing is called in which you recreates the 1st again. so the actual click of the 1st drop down is lost as all the new bindings are added to the 1st drop down.

you have to change the code in the plugin if you want to achive it which is not a good practise. Also you can force the 1st dropdown to show the options by using $('.sumo_country').addClass('open').attr('aria-expanded', 'true'); but again for closing the dropdown you have to click twice for 1st time.

The proper and feasible way to change any drop down values which are depending on other is by using the change function of the drop down.

In your case you have to change the data whenever the value is selected or deselected from 2nd drop down which will work for you.

Related