How to apply scrollbar on multiselect texbox where elements are placed after selection


#1

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


#2

Some questions:

  1. Does this happen in all browsers?
  2. Can you post some sample code that demonstrates this behavior on Codepen.io or JSFiddle?

#3

Hi @John30013

YI have checked this with Chrome and Firefox and it is happening with both.

JS Fiddle link below

https://jsfiddle.net/shubhangia/L4kt6eoy/4/


#4

This might be a bug, although it’s not entirely clear. Using the arrow keys to scroll back up the list also causes the dropdown list to be displayed. In fact, it doesn’t seem to matter whether you have to scroll or not. If you only select one item, and then focus somewhere else, if you then try to delete that single item, the dropdown appears again. In fact, it seems like Case 1 you described is the “outlier”, and the intended behavior is, in fact, Case 2.