floating-vue icon indicating copy to clipboard operation
floating-vue copied to clipboard

Published 20 hours ago • verified publisher icon Akryum

[Bug]: The active element loses focus when the dropdown is opened

Open or2e opened this issue 3 years ago • 2 comments

Hi, In the process of implementing the auto-suggestions component, we encountered a problem. In manual mode (triggers: [], :shown="boolean"), input loses focus.

https://github.com/Akryum/floating-vue/blob/main/packages/floating-vue/src/components/PopperContent.vue#L26 This is due to setting tabindex=0:

https://user-images.githubusercontent.com/33551334/175253476-8b525dca-47a5-4564-b87d-0dd37463d38f.mp4

If set tabindex=undefined, it's work correct:

https://user-images.githubusercontent.com/33551334/175253494-f3f1bfcb-3548-40b8-aa3f-6a3fd736c5c4.mp4

1/ What options can be considered, besides patching the library? 2/ What can break when removing tabindex?

Thanks 4 amazing lib :)

or2e avatar Jun 23 '22 08:06 or2e

Same here @or2e It seems, the only workaround is to set :autoHide="false" and hide on focus out.

Disorrder avatar Jun 27 '22 16:06 Disorrder

Same here @or2e It seems, the only workaround is to set :autoHide="false" and hide on focus out.

Hi) Then behavior don't work: close if clicked outside

or2e avatar Jun 27 '22 17:06 or2e

resolved in https://github.com/Akryum/floating-vue/commit/919df7c71c7c058e36be0e04121adbdc2a8939b9

or2e avatar Sep 09 '22 19:09 or2e