update the test, fix discovered issue

Author: oliviertassinari

packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js

@@ -77,36 +77,27 @@ describe('<Autocomplete />', () => {
       checkHighlightIs('one');
     });
 
-    it.only('should set the focus on selected item when dropdown is expanded', () => {
-      const options = ['one', 'two', 'three'];
+    it('should set the focus on selected item when dropdown is expanded', () => {
       const { getByRole, setProps } = render(
         <Autocomplete
           {...defaultProps}
           value="one"
-          options={options}
+          options={['one', 'two', 'three']}
           renderInput={params => <TextField autoFocus {...params} />}
-          size="small"
         />,
       );
 
       function checkHighlightIs(expected) {
         expect(getByRole('listbox').querySelector('li[data-focus]')).to.have.text(expected);
       }
 
-      fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' });
       checkHighlightIs('one');
-
-      // setProps({ value: 'two' })
-      // checkHighlightIs('two');
-
-      // fireEvent.change(document.activeElement, { target: { value: 'two' } });
-      // fireEvent.keyDown(document.activeElement, { key: 'Enter' });
-      // fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' });
-      // checkHighlightIs('two');
+      setProps({ value: 'two' });
+      checkHighlightIs('two');
     });
   });
 
-  describe.only('prop: filterSelectedOptions', () => {
+  describe('prop: filterSelectedOptions', () => {
     it('when the last item is selected, highlights the new last item', () => {
       const { getByRole } = render(
         <Autocomplete

packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js

@@ -133,7 +133,7 @@ export default function useAutocomplete(props) {
   const defaultHighlighted = autoHighlight ? 0 : -1;
   const highlightedIndexRef = React.useRef(defaultHighlighted);
 
-  function setHighlightedIndex(index, mouse = false) {
+  const setHighlightedIndex = useEventCallback((index, mouse = false) => {
     highlightedIndexRef.current = index;
     // does the index exist?
     if (index === -1) {
@@ -190,7 +190,7 @@ export default function useAutocomplete(props) {
         listboxNode.scrollTop = element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0);
       }
     }
-  }
+  });
 
   const [value, setValue] = useControlled({
     controlled: valueProp,
@@ -323,7 +323,7 @@ export default function useAutocomplete(props) {
     }
   }
 
-  const changeHighlightedIndex = (diff, direction) => {
+  const changeHighlightedIndex = useEventCallback((diff, direction) => {
     if (!popupOpen) {
       return;
     }
@@ -390,11 +390,7 @@ export default function useAutocomplete(props) {
         }
       }
     }
-  };
-
-  React.useEffect(() => {
-    changeHighlightedIndex('reset', 'next');
-  }, [inputValue]); // eslint-disable-line react-hooks/exhaustive-deps
+  });
 
   React.useEffect(() => {
     if (!open) {
@@ -423,8 +419,18 @@ export default function useAutocomplete(props) {
     if (highlightedIndexRef.current >= filteredOptions.length - 1) {
       setHighlightedIndex(filteredOptions.length - 1);
     }
+
+    // Ignore filterOptions => options, getOptionSelected, getOptionLabel)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, open, filterSelectedOptions, multiple]);
+  }, [
+    value,
+    open,
+    filterSelectedOptions,
+    changeHighlightedIndex,
+    setHighlightedIndex,
+    inputValue,
+    multiple,
+  ]);
 
   const handleOpen = event => {
     if (open) {