Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
AnnaYuS opened this issue Aug 30, 2022 · 3 comments · Fixed by #21
Closed

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

AnnaYuS opened this issue Aug 30, 2022 · 3 comments · Fixed by #21
Labels
bug Something isn't working vue

Comments

@AnnaYuS
Copy link

AnnaYuS commented Aug 30, 2022

Use Version
Use version when bugs appear:

  • Headless UI: v1.6.7
  • Headless UI Float: v0.8.0
  • Framework: vue v3.2.31
  • @floating-ui/core: v1.0.0
  • @floating-ui/dom: v1.0.0
  • Chrome

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

@AnnaYuS AnnaYuS added the bug Something isn't working label Aug 30, 2022
@ycs77 ycs77 closed this as completed in #21 Sep 13, 2022
@ycs77
Copy link
Owner

ycs77 commented Sep 13, 2022

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
Copy link

yakobe commented Sep 14, 2022

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
Copy link
Owner

ycs77 commented Sep 23, 2022

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.

@ycs77 ycs77 added the vue label Oct 14, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working vue
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants