react-international-phone icon indicating copy to clipboard operation
react-international-phone copied to clipboard

Feature Request: allow integration with floating UI

Open isoroka-plana opened this issue 5 months ago • 0 comments

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>

isoroka-plana avatar Aug 29 '24 11:08 isoroka-plana