Akryum / floating-vue

💬 Easy tooltips, popovers, dropdown, menus... for Vue
https://floating-vue.starpad.dev/
MIT License
3.28k stars 335 forks source link

When in a modal, the focus is being transferred to the trigger element #960

Closed AmitJoki closed 1 year ago

AmitJoki commented 1 year ago

Supposing you have the following Dropdown

<VDropdown>
    <!-- This will be the popover target (for the events and position) -->
    <button>Click me</button>
    <!-- This will be the content of the popover -->
    <template #popper>
      <input />
    </template>
</VDropdown>

Once you click Click me and click on the input, it remains focuses as is expected.

But the moment it is in some sort of a modal, clicking on input transfers the focus to the trigger element in this case, the button Click me

Here is the reproduction link:

https://codesandbox.io/s/happy-tdd-tluovu?file=/src/App.vue

  1. There's Click me button in the page -> Click it and click on input -> Works correctly.
  2. Then there's a Open modal button which opens a modal which contains the same dropdown. Click on Open modal and repeat step 1, it does not work anymore. The input does not get focus and instead the trigger is focused.
AmitJoki commented 1 year ago

Seems like this was an issue in the other library.