search

ycs77 / headlessui-float

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

unmount="false" in PopoverPanel breaks floating element position calculations #19

Closed AnnaYuS closed 1 year ago

AnnaYuS commented 1 year ago

Use Version Use version when bugs appear:

Describe the bug When unmount="false" prop is added to headless ui PopoverPanel, the position of the floating element doesn't update

To Reproduce https://stackblitz.com/edit/github-vfx4en?file=src/components/ExamplePopover.vue

ycs77 commented 1 year ago

Hi @AnnaYuS

Now released v0.9.1 fixed this bug, although fixes the element position, the use of unmount will make the transition unable to work properly because I cannot operate inside the components of the Headless UI. Unless you have special needs, it is not recommended to use unmount. If you really need it, it is recommended to use static to customize, or give up using Headless UI Float and use CSS for positioning. 😅

yakobe commented 1 year ago

Hi @ycs77 Many thanks for this 👍. In my case i used the unmount=false so that i could open a dialog from a popover. Otherwise the popover loses focus when the dialog opens and then unmounts, also unmounting the dialog. Perhaps this isn't the right use case for unmount? Is there a better way to allow a dialog to open from a popover?

ycs77 commented 1 year ago

Hi @yakobe, you can use the focus attribute of <PopoverPanel> to automatically focus the <input> inside it when opened. (Cannot use :unmount="false") reference: https://headlessui.com/vue/popover#popover-panel

If you have other questions, please open a new issue.