react-international-phone
react-international-phone copied to clipboard
Feature Request: allow integration with floating UI
Is your feature request related to a problem? Please describe. Currently, the dropdown for country selection is absolute-positioned and rendered based on the display CSS property. This does not look very great when the input is used in a small dialog window where you would expect the dropdown to display over the dialog boundary but it just makes the dialog scrollable instead.
Describe the solution you'd like FloatingUI is a great option for this. If you don't want to make it a dependency of this lib then the PhoneInput component could be broken into a few composable components and then the users themselves could optionally use floating. E.g. like this:
<PhoneInput>
(countrySelectOpen) => (
<>
{countrySelectOpen && <FloatingPortal><PhoneInput.CountrySelectPanel/></FloatingPortal>}
</>
)
</PhoneInput>