<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
There's Click me button in the page -> Click it and click on input -> Works correctly.
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.
Supposing you have the following Dropdown
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
Open modal
button which opens a modal which contains the same dropdown. Click onOpen modal
and repeat step 1, it does not work anymore. The input does not get focus and instead the trigger is focused.