Country selection doesn't work in the shadow DOM

[traianturcu]

I am using react-phone-input-2 in the shadow DOM.

If I click on the country dropdown, it shows up and I am able to select a country using the keyboard (arrow up, down, ENTER).
However, if I am trying to use the mouse, the dropdown closes (whether I try to select a country or to drag the scroll bar).

The only solution that fixes this is to disable enableClickOutside

based on this I think the problem comes from this part of the code:

    if (document.addEventListener && this.props.enableClickOutside) {
      document.addEventListener('mousedown', this.handleClickOutside);
    }

I'm not sure if there is any potential solution to maybe provide another prop with the shadowRoot so that the event listener can be attached to it, rather than the document , if it's provided?

Thank you!