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.

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

[Joy][MenuList] Menu list constantly steals focus #36799

Closed
2 tasks done
Studio384 opened this issue Apr 7, 2023 · 2 comments · Fixed by #36400
Closed
2 tasks done

[Joy][MenuList] Menu list constantly steals focus #36799

Studio384 opened this issue Apr 7, 2023 · 2 comments · Fixed by #36400
Assignees
Labels
component: menu This is the name of the generic UI component, not the React module! design: joy This is about Joy Design, please involve a visual or UX designer in the process

Comments

@Studio384
Copy link
Contributor

Studio384 commented Apr 7, 2023

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/modest-gates-zwyhbd?file=/demo.tsx

Steps:

  1. Type in the search field
  2. The menu list will steal focus when typing the first letter, or when the list is empty and the user removes part of the input until an item reappears

Current behavior 😯

The MenuList component will constantly try to take away the focus from the search field.

Expected behavior 🤔

The MenuList component only takes focus when given to it. Similar to how Material UI works:

https://codesandbox.io/s/strange-danny-zbbum8?file=/demo.tsx

This behavior should either be removed or optional.

This causes other issues as well, for example, just go to the Menu documentation. The page will automatically go to the "without a popup" demo because it takes focus when it really shouldn't.

Context 🔦

I'm basically trying to built a quick search field that shows a couple of its examples that is easily navigated with a keyboard, MenuList works better in this context then List which lacks keyboard navigation.

Your environment 🌎

No response

@Studio384 Studio384 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Apr 7, 2023
@yushanwebdev
Copy link
Contributor

yushanwebdev commented Apr 7, 2023

@gzrae @siriwatknp I will check this issue

yushanwebdev added a commit to yushanwebdev/material-ui that referenced this issue Apr 9, 2023
yushanwebdev added a commit to yushanwebdev/material-ui that referenced this issue Apr 9, 2023
- Configure the `isAnchorElExist` type in the `UseMenuParameters` useMenu Interface to identify whether Menu Component is dependent or not
- Develop the functionality to default focus on the first menu item if the Menu Component is dependent
yushanwebdev added a commit to yushanwebdev/material-ui that referenced this issue Apr 9, 2023
- Update the `useMenu` Hook Paramters in the `<MenuUnstyled />` MUI Base Component & `<Menu />` MUI Joy Component
yushanwebdev added a commit to yushanwebdev/material-ui that referenced this issue Apr 9, 2023
@zannager zannager added component: menu This is the name of the generic UI component, not the React module! design: joy This is about Joy Design, please involve a visual or UX designer in the process labels Apr 10, 2023
@yushanwebdev
Copy link
Contributor

yushanwebdev commented Apr 11, 2023

This issue is fixed now with the #36400 Changes @siriwatknp

@michaldudak michaldudak removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Apr 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: menu This is the name of the generic UI component, not the React module! design: joy This is about Joy Design, please involve a visual or UX designer in the process
Projects
None yet
5 participants