-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
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] Select option not scroll drop list to defaultValue of first open #19779
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
oliviertassinari
added
the
status: waiting for author
Issue with insufficient information
label
Feb 19, 2020
This comment has been minimized.
This comment has been minimized.
oliviertassinari
changed the title
[AutoComplete] Select option not scroll drop list to defaultValue of first open
[Autocomplete] Select option not scroll drop list to defaultValue of first open
Feb 19, 2020
oliviertassinari
added
bug 🐛
Something doesn't work
component: autocomplete
This is the name of the generic UI component, not the React module!
and removed
status: waiting for author
Issue with insufficient information
labels
Feb 19, 2020
Here is a proposed solution for #19637, #19779, and #19637. Let us know if it works for your use case! diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
index bd9dc472f..c71b1b88f 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js
@@ -757,7 +757,6 @@ describe('<Autocomplete />', () => {
/>,
);
- fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' });
fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' });
fireEvent.keyDown(document.activeElement, { key: 'Enter' });
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index 9957ed76d..2200b20c1 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -396,6 +396,32 @@ export default function useAutocomplete(props) {
changeHighlightedIndex('reset', 'next');
}, [inputValue]); // eslint-disable-line react-hooks/exhaustive-deps
+ React.useEffect(() => {
+ if (!open) {
+ return;
+ }
+
+ const valueItem = multiple ? value[0] : value;
+
+ if (filteredOptions.length === 0 || valueItem == null) {
+ changeHighlightedIndex('reset', 'next');
+ return;
+ }
+
+ if (!filterSelectedOptions && valueItem != null) {
+ const itemIndex = findIndex(filteredOptions, optionItem =>
+ getOptionSelected(optionItem, valueItem),
+ );
+
+ setHighlightedIndex(itemIndex);
+ return;
+ }
+
+ if (highlightedIndexRef.current >= filteredOptions.length - 1) {
+ setHighlightedIndex(filteredOptions.length - 1);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [value, open, filterSelectedOptions, multiple]);
+
const handleOpen = event => {
if (open) {
return; We will probably need to add one test case per issue for this logic (corresponding to each issue). |
oliviertassinari
added
the
good first issue
Great for first contributions. Enable to learn the contribution process.
label
Feb 22, 2020
@fast0490f @oliviertassinari I will pick it up if you don't mind |
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.
Hi, please, look at the gif with the problem:
The text was updated successfully, but these errors were encountered: