Material-ui: [Autocomplete] Can't use Home/End keys

Created on 12 Nov 2019  路  6Comments  路  Source: mui-org/material-ui


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

  • [x] 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

bug 馃悰 Autocomplete good first issue

Most helpful comment

@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 :)

All 6 comments

@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

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

@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.

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

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

@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 :)

Was this page helpful?
0 / 5 - 0 ratings