8000 MultiSelect with appendTo[Body] focus issues · Issue #182 · vueform/vueform · GitHub
[go: up one dir, main page]
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MultiSelect with appendTo[Body] focus issues #182

Open
nclemeur opened this issue Mar 13, 2024 · 7 comments
Open

MultiSelect with appendTo[Body] focus issues #182

nclemeur opened this issue Mar 13, 2024 · 7 comments
Labels
bug p3-minor-bug

Comments

@nclemeur
Copy link

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
Copy link
Collaborator

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

@nclemeur
Copy link
Author

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 adamberecz reopened this Mar 25, 2024
@adamberecz
Copy link
Collaborator

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

@adamberecz
Copy link
Collaborator

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
Copy link
Author
nclemeur commented May 9, 2024 •
edited
Loading

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?

@adamberecz
Copy link
Collaborator

Your demo is no longer available @nclemeur. Any chance you can recreate it? I want to have a look on the issue, because I'm just about to release a new multiselect version.

@nclemeur
Copy link
Author

Sorry I am not sure what happen to the stackblitz, but here is another that show the problem:

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

If you click the button in the dropdown, the button will disable it-self and the dropdown will close (there is a button to renable the button and also a checkbox to disabled the button disabling it-self, in that case the dropdown is not closed, as expected)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug p3-minor-bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nclemeur @adamberecz
0