TomSelect element in shadow root

[jrief]

It seems, that when moving a tom-select element into the shadow root, some event are swallowed or somehow not propagated correctly.

For reference, I created a select element using the standard CSS as provided by tom-select.css
Here everything works as expected. Please check this Code-Pen.

Then I created the same example as before, but instead I moved the select element into a shadow root and initialized the tom-select element within. Since elements in a shadow root have to be styled isolated, I copied the CSS from above into a style-element and attached that inside the shadow root.
On the first sight, there seems to be no difference – what one would expect. Please check this Code-Pen.

However, some events seem to get swallowed. Clicking on an option, doesn't call the registered handler, ie. addEvent(dropdown,'click',(evt) => {...}
Also the behaviour when clicking on the input field for the first time, is different compared to the example above.

Any idea, what could cause these problems?

[oyejorge]

Interesting. I'm going to have to brush up on shadow root functionality but I wonder if it has something to do with how we determine if a mousedown event is targeting an element inside the Tom Select instance. Might be able to fix this by implementing a contains() method like popper.

[oyejorge]

Just released 1.7.6 with the fix