-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Description
Describe the bug
Looking at the documentation of Vue Effects I understand that positioning is done in an async function and that the useFloating composable returns an isPositioned boolean ref that lets me know if the floating element has been positioned. I can also provide an open option that represents the open/close state of the floating element. So far, so good.
Judging from the linked example in the documentation, I would expect that the isPositioned ref would be set to true everytime the floating element has been opened, so I can for example focus elements inside it. I need to ensure the positioning is done first before focusing anything to prevent unwanted scrolling behaviour. But isPositioned only becomes true after the open option has been set to false. See my example. This way, I can never determine when the positioning is done after opening a dropdown.
The linked documentation says in the comment:
Each time the floating element opens, we want to focus and scroll some element into view.
So either I am using isPositioned wrong or the library is not working as intended per the documentation.
To Reproduce
I forked the @floating-ui/vue demo: https://codesandbox.io/p/sandbox/floating-ui-vue-demo-forked-wrzxdx
Steps to reproduce the behavior:
- Open the codesandbox link
- Click on the button multiple times
- See how
isPositionedonly becomes true afteropenis set tofalse.
Expected behavior
I would expect isPositioned to be set every time the open option updates, not only when it is false.
Context:
- OS: macOS Sonoma
- Browser Chrome 127
- Version @floating-ui/vue 1.1.3