search

ycs77 / headlessui-float

Easily use Headless UI with Floating UI to position floating elements.
https://headlessui-float.vercel.app
MIT License
348 stars 13 forks source link

React: headlessUi panels property unmount={false} not working #104

Closed Geancarlo-Cojocaru closed 5 months ago

Geancarlo-Cojocaru commented 7 months ago

Bug description: In React, the Float component always unmounts the panels (Popover.Panel, Listbox.Panel) even if we pass the prop unmounted={false} on Popover.Panel or Listbox.Panel. For example, when using the Popover with form elements, we need those panels to be hidden, not unmounted, otherwise they will not be collected with formData on submit.

To reproduce: Head over to the Popover example and put unmount={false} on Popover.Panel (<Popover.Panel className="w-[240px] h-[70px] bg-white border border-gray-200 rounded-md shadow-lg focus:outline-none" unmount={false}>)

Expected behavior When we pass the prop unmount={false}, the panel should not be unmounted if not showing, it should only be hidden.

PS: it works as expected in Vue examples though.

Geancarlo-Cojocaru commented 7 months ago

I took a quick glance at your code, you're missing the unmount prop on transitionProps here.

ycs77 commented 5 months ago

Fixed in v0.13.3