Select2 inside ShadowRoot Broke In 4.0.11

[pm-michael]

#5584 breaks the usage of Select2 inside a ShadowRoot, because $.contains() returns false, even though the Node is actually connected to the document.

I'd propose changing the following code:

    if ($.contains(document.body, $offsetParent[0])) {
      parentOffset = $offsetParent.offset();
    }

To this:

    if ($offsetParent[0].isConnected) {
      parentOffset = $offsetParent.offset();
    }

[lazka]

Since 4.0.11 (4.0.10 works) I also get wrong offsets for the popup:

This is also inside a Shadow DOM.

[kevin-brown]

Probably going to switch this to

    if ($.contains(document.body, $offsetParent[0]) || $offsetParent[0].isConnected) {
      parentOffset = $offsetParent.offset();
    }

Just to handle IE/Edge/older browsers when they aren't using the shadow DOM (because let's be honest, they won't be using the shadow DOM if they're old enough to not support isConnected).

[paxnovem]

I have made the change locally, looking into how to get proper test coverage for this

[knlshnd]

I am still not able to get it working inside the shadowDOM. I am trying to use it inside an angular element. It gives me an error: Please add Select2 library (js file) to the project. I am using view encapsulation in this. I do not know how to use dropdownParent properly, so have not tried that

[lazka]

I have it working with a dropdownParent referencing an element in the shadow dom, if that helps.

[knlshnd]

Can you give me a reference as to how exactly to do it?

[sergotail]

Hi, issue still persists for multiple shadow DOM subtrees having select2 elements. I have a custom element, and i initialize select2 for elements inside shadow DOM, in connectedCallback. And when i add second, third and so on custom elements, all select2 forms nested in existing custom elements are become broken.
My version of select2 is 4.0.13.