MultiSelect with appendTo[Body] focus issues

[nclemeur]

Environment

Please see discussion here: https://discord.com/channels/787237947635793940/1216840909132533760/1216989160347406467

Reproduction

https://stackblitz.com/edit/github-esmsuw?file=src%2FApp.vue

Describe the bug

Clicking the scroller on the side or anything in the after-list slot, close the dropdown

Additional context

No response

Logs

No response

[adamberecz]

Thanks for reporting the issue. Fixed in @vueform/multiselect: 2.6.7.

[nclemeur]

I have make sure that the dependency for multiselect was updated to 2.6.7 and tried again in the stackblitz above, but the behaviour is still the same. Clicking the scrollbar or anything in the after-list slot is closing the dropdown. Am I missing something?

[adamberecz]

It's true - I only checked the scrollbar issue and not before/after slots. Will fix.

[adamberecz]

I've double checked and it seems like the issue was resolved even in the 2.6.7 release. Here's a sandbox with the latest Vueform + MS version:
https://stackblitz.com/edit/github-lzbcrs?file=src%2FApp.vue

[nclemeur]

This is really strange, it's indeed working now. I don't really understand why it was not working before. Maybe I should have deleted the node_modules folder before running npm install...
I did however found a use case where the dropdown close it-self for no real reason. If in your click handler in the button, you disable the button, the issue is showing again. You can see it in this stackblitz

Maybe we would need a prop "persist" (or similar) to completely disable what is done for the focus handling and only close the dropdown if an option is selected or explicitly closed using an api?