jackocnr/intl-tel-input

I'm create IntlTelInput react component using with headless Dialog (Modal) but IntlTelInput can't closing when click outside.

Closed this issue · 4 comments

chayutWQ commented

Steps to reproduce

  1. created headless Dialog (Modal) basic
  2. put IntlTelInput react component into Modal

import IntlTelInput from "intl-tel-input/react/build/IntlTelInput.esm";
import "intl-tel-input/build/css/intlTelInput.css";

<IntlTelInput
initOptions={{
utilsScript: appConfig.origin + ${basename}/intl-tel-input/js/utils.js?1709392860975
}}
/>

Expected behaviour

can't closing when click outside on headless Dialog (Modal) basic

Actual behaviour

can't closing when click outside on headless Dialog (Modal) basic

Initialisation options

List any options you're using e.g. utilsScript or preferredCountries

image

jackocnr commented

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.

chayutWQ commented

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

jackocnr commented

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.

jackocnr commented

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.