Skip to content

Focusout for Dropdown, Menubar and ContextMenu #22

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
Merged
merged 19 commits into from
Jun 11, 2025
Merged

Focusout for Dropdown, Menubar and ContextMenu #22

merged 19 commits into from
Jun 11, 2025

Conversation

wheregmis
Copy link
Contributor

@wheregmis wheregmis commented May 8, 2025 •
edited
Loading

Attempt for #18 & #28

@wheregmis wheregmis changed the title focusout Focusout for Dropdown and ContextMenu May 9, 2025
@wheregmis wheregmis marked this pull request as draft May 15, 2025 13:03
@wheregmis wheregmis marked this pull request as ready for review May 18, 2025 18:10
@wheregmis
Copy link
Contributor Author

Maybe we need something similar for menubar

@wheregmis
Copy link
Contributor Author

One main drawback for this is, to make accessibility work with this. I am not sure if we should go ahead with funtionality or accessibility. Until we find the sweet spot

@wheregmis wheregmis changed the title Focusout for Dropdown and ContextMenu Focusout for Dropdown, Menubar and ContextMenu May 30, 2025
@wheregmis wheregmis marked this pull request as draft May 30, 2025 20:45
@wheregmis wheregmis marked this pull request as ready for review May 30, 2025 20:45
@wheregmis wheregmis marked this pull request as draft May 31, 2025 18:01
@wheregmis
Copy link
Contributor Author

#28

@wheregmis wheregmis marked this pull request as ready for review June 2, 2025 13:55
@ealmloff
Copy link
Member

ealmloff commented Jun 2, 2025

When I serve this branch locally, I'm not able to interact with any of the buttons in the context menu dropdown. I'm guessing because when you click the button, the div loses focus?

Screen.Recording.2025-06-02.at.4.17.41.PM.mov

@wheregmis wheregmis marked this pull request as draft June 2, 2025 23:25
@wheregmis
Copy link
Contributor Author

Thank you @ealmloff for pointing it out. Looks like inert was making it not work for some reason. But we can leave it commented for now. Should be okay now.

@ealmloff ealmloff mentioned this pull request Jun 11, 2025
Closed
@ealmloff ealmloff added bug Something isn't working accessability styling labels Jun 11, 2025
@ealmloff
Copy link
Member

It looks like onfocusout has limited support in browsers, so we should probably avoid using it in the component library. I pushed some changes with a similar approach using the onblur on each focusable element, which seems to work with the new keyboard support. Let me know if I missed anything from your original implementation.

It looks like animations are working as well. Is this ready to merge?

@wheregmis
Copy link
Contributor Author

wheregmis commented Jun 11, 2025 •
edited
Loading

Thank you @ealmloff for picking it up and cleaning, i got abit busy with something else so couldnt clean things up for merge. Looks good to me its ready to merge.

@wheregmis wheregmis marked this pull request as ready for review June 11, 2025 22:46
@github-actions GitHub Actions
Copy link

Preview available at https://dioxuslabs.github.io/components/pr-preview/pr-22/

@ealmloff ealmloff merged commit bd67af5 into DioxusLabs:main Jun 11, 2025
12 checks passed
This was referenced Jun 11, 2025
Closed
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
accessability bug Something isn't working styling
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@wheregmis @ealmloff