I'm create IntlTelInput react component using with headless Dialog (Modal) but IntlTelInput can't closing when click outside. about intl-tel-input HOT 4 CLOSED

So it looks like you're having a problem with the dropdown being cut off - for this I would recommend checking out the dropdownContainer option.

As for the click-off-to-close issue - I'm afraid I won't be able to help without a live demo to play with. If you can find the minimal set of code that reproduces the problem and put that in a CodePen, then I'd be happy to take a look. Here is an example pen with the plugin up and running - feel free to fork this if it helps.

from intl-tel-input.

Could you please try this thanks.
https://codepen.io/chayutWQ/pen/yLrJrmB

from intl-tel-input.

Thanks for putting that together. Yes I can confirm that click-off-to-close is not working within the dialog. So the way the plugin handles click-off-to-close is by setting a click listener on the root document.documentElement node, but in this case, due to the @headlessui/react library you're using, clicks on the dialog are being swallowed, and so they never bubble up to the documentElement. I'm not sure of a way around this from my end. I think the best thing to do is open an issue with @headlessui/react and ask if there's a way to disable this click-swallowing behaviour. Please link to this issue so we can keep in sync. Thanks.

Edit: I found a relevant issue in the headlessui repo and so posted a comment there. It seems like several other people are having the same problem but nothing seems to be done unfortunately.

from intl-tel-input.

I'm afraid there's nothing we can do about this - it's a problem with another library, so I'm going to close this.

from intl-tel-input.