Skip to content

isPositioned only becomes true after setting the open option to false #3017

@sebbayer

Description

@sebbayer

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:

  1. Open the codesandbox link
  2. Click on the button multiple times
  3. See how isPositioned only becomes true after open is set to false.

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions