I have applied the style to ul element
<ul class="select2-selection__rendered">
with overflow : auto and max-height : 100px and scrollbar appears once the height of textbox reached 100px, but problem is now remove event on selected item does not work if focus is on any other element of DOM.
If I have 10 elements selected(one in a line, 10 lines in textbox) in multiselect and now I am working on something else on current page lets say a radio list (only to loose focus from multiselect) and then
CASE 1:
I click the x buttong on any of last 3 elements which are visible in 100px area, item will be removed and dropdown will get open. THIS IS THE CORRECT BEHAVIOR AND WORKING FINE
CASE 2:
I scroll the elements in multiselect textbox to reach the 1st item(it could be any item in textbox which is not directly visible without scrolling up) without selecting the multiselect (key is focus should not be on multiselect) then hit the x icon , item will NOT BE REMOVED and dropdown will get open. FAILURE - NOT A DESIRED BEHAVIOR, ITEM SHOULD BE REMOVED
But if I click the x icon of first element when focus is set to multiselect then item gets removed and it worked fine.
TECHNICAL INSIGHTS
FOR CASE 2 (FAILURE CLAUSE)
Event fired is
this.$selection.on(‘click’, function (evt) {
self.trigger(‘toggle’, {
originalEvent: evt
});
});
Here evt.target: ul.select2-selection__rendered, evt.currentTarget: span.select2-selection.select2-selection–multiple
FOR CASE 1
event called is
this.$selection.on(
‘click’,
‘.select2-selection__choice__remove’,
function (evt) {
// Ignore the event if it is disabled
if (self.options.get(‘disabled’)) {
return;
}
var $remove = $(this);
var $selection = $remove.parent();
var data = $selection.data(‘data’);
self.trigger(‘unselect’, {
originalEvent: evt,
data: data
});
}
);
evt.target: span.select2-selection__choice__remove, evt.currentTarget: span.select2-selection__choice__remove
MY UNDERSTANDING on this is having a scroll bar changes the event propagation and eventlisteners are not called on child element.
Any help would be greatly appreciated