When using the Autocomplete component wrapping a TextField, using Home/End keys to navigate inside the TextField doesn't work.
Using Home/End keys to navigate inside TextField doesn't work
Using Home/End keys to navigate inside TextField should work
@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 :)
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 :)