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

[Autocomplete] Can't use Home/End keys #18335

Closed
1 task done
munybt opened this issue Nov 12, 2019 · 8 comments · Fixed by #18338
Closed
1 task done

[Autocomplete] Can't use Home/End keys #18335

munybt opened this issue Nov 12, 2019 · 8 comments · Fixed by #18338
Labels
bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.

Comments

@munybt
Copy link

munybt commented Nov 12, 2019

When using the Autocomplete component wrapping a TextField, using Home/End keys to navigate inside the TextField doesn't work.

  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Using Home/End keys to navigate inside TextField doesn't work

Expected Behavior 🤔

Using Home/End keys to navigate inside TextField should work

Steps to Reproduce 🕹

Edit Autocomplete freeSolo test

@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work good first issue Great for first contributions. Enable to learn the contribution process. component: autocomplete This is the name of the generic UI component, not the React module! labels Nov 12, 2019
@oliviertassinari
Copy link
Member

@munybt Thank you for the report. Know I understand why they were no mention to it in https://www.w3.org/TR/wai-aria-practices/#combobox! I'm stupid, I should have seen it coming. Anyway, what do you think of this diff, does it solve your problem? Do you want to submit a pull request? :)

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index feb69e2f2..dda61b78c 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -490,14 +490,18 @@ export default function useAutocomplete(props) {

     switch (event.key) {
       case 'Home':
-        // Prevent scroll of the page
-        event.preventDefault();
-        changeHighlightedIndex('start', 'next');
+        if (popupOpen) {
+          // Prevent scroll of the page
+          event.preventDefault();
+          changeHighlightedIndex('start', 'next');
+        }
         break;
       case 'End':
-        // Prevent scroll of the page
-        event.preventDefault();
-        changeHighlightedIndex('end', 'previous');
+        if (popupOpen) {
+          // Prevent scroll of the page
+          event.preventDefault();
+          changeHighlightedIndex('end', 'previous');
+        }
         break;
       case 'PageUp':
         // Prevent scroll of the page

@munybt
Copy link
Author

munybt commented Nov 12, 2019

Yes, if it fixes the problem :)
Note that it also should work when one presses SHIFT+END and other combinations that include these keys

@oliviertassinari
Copy link
Member

oliviertassinari commented Nov 12, 2019

@munybt Do you mean we have another problem? I'm on the macOS platform, I suspect you are on Windows, where the native behavior is different for the Home and End keys.

@munybt
Copy link
Author

munybt commented Nov 12, 2019

@oliviertassinari Yes, I am using Windows. You are right, the behaviour is different between Windows and macOS

@munybt
Copy link
Author

munybt commented Nov 12, 2019

@oliviertassinari Can you please explain how I can test your modification or try to fix this bug myself?

@weslenng
Copy link

@munybt You can clone the Material UI repository and make a patch locally. I'll send a PR in a few hours, so in the next versions of the package this problem should be solved :)

@sjohnsonaz
Copy link

This issue appears to be happening still. I'm on version "@mui/material": "5.10.16".

@v1d3rm3
Copy link

v1d3rm3 commented Jul 11, 2023

"@mui/material": "5.13.7", same problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants