scroll not working

[f108156106]

https://jsfiddle.net/f83269Ly/

When I scroll dropdown of tags at bootstrap modal, The dropdown will disappear.

[lekoala]

@f108156106 good catch, that's a tricky one. i never realized i could not trust the blur event of the input ^^
not sure what is the best way to deal with this, but in the meantime i added a global click handler on the document to blur things when needed instead. it's on master you can give it a try :)

[f108156106]

@lekoala add display: flex make clear button upper on baseline, you need to add "align-items-center".

[lekoala]

added in https://github.com/lekoala/bootstrap5-tags/releases/tag/1.6.13

[f108156106]

@lekoala
https://jsfiddle.net/k02yx617/

use 1.6.13 version exists problem.

1.scroll still not working.
2.This dropdown of single tag not collapse at choose.

[lekoala]

ahah yes it was fixed in .12 but broke again in .13 due to the focus event i added for the add on blur feature
https://github.com/lekoala/bootstrap5-tags/releases/tag/1.6.14
this should do it
i really need to refactor this whole thing :)

[perikorese]

I'm having this exact problem in version 1.7.1.

When I try to scroll by dragging the scrollbar og clicking the arrows in the scrollbar, it disappears.

[lekoala]

@perikorese this seems to work in the jsfiddle no ?
https://jsfiddle.net/f83269Ly/

it does work for me in chrome at least

[perikorese]

@lekoala Yes, in the fiddle it works.

I am using this in the select-tag:

data-server="/some/url"
data-server-params='{"id":"0"}'
data-show-drop-icon="false"
data-autoselect-first="false"
data-allow-new="true"
data-allow-clear="true"
data-clear-end="true"
data-show-disabled="true"
data-add-on-blur="true"
data-badge-style="secondary"
multiple

[lekoala]

@perikorese mhhh i updated the demo, all working fine for me

1c18786

can you show me how to replicate the issue?

[perikorese]

I did a little research and found out, that if do this in jQuery, it works, i.e. I can drag the scrollbar and click the arrows without it closing.

$('#editmodal').on('mousedown mouseup click', '#typetags .dropdown-menu', function(e) {
  e.preventDefault();
});

where #editmodal is a large modal with multiple bootstrap5-tags instances (Modular Behaviour) on various form fields and #typetags is a div that encloses the select-element and the ul with class dropdown-menu.

[lekoala]

@perikorese yes that makes sense. it's just very odd it's seems to be working fine when I try it. Do you have a jsfiddle or codepen where i could see the issue?

[perikorese]

I found out what the problem was in my project. It is not a problem in bootstrap5-tags.

The select elements with the problem was in an enclosing div with the attribute tabindex="0". When I removed that attribute which is not needed, the problem was resolved.

[lekoala]

@perikorese oh that makes sense, good to know !

[f108156106]

@lekoala I still have this problem

[f108156106]

I have two environment
chrome 114.0.1823.37 working
chrome 127.0.6533.120 not working

[lekoala]

indeed, it seems chrome is now handling the target better in a modal
https://github.com/lekoala/bootstrap5-tags/releases/tag/1.7.5
this seems to fix it for me