[material-ui][Autocomplete] Prevent shrink animation in controlled Autocomplete when initial value is provided (@imadx) (#45735)

Co-authored-by: Ishan Madhusanka <[email protected]>
Co-authored-by: ZeeshanTamboli <[email protected]>

Author: 3 people

packages/mui-material/src/useAutocomplete/useAutocomplete.js

@@ -146,9 +146,9 @@ function useAutocomplete(props) {
   const highlightedIndexRef = React.useRef(defaultHighlighted);
 
   // Calculate the initial inputValue on mount only.
-  // Using useRef since defaultValue doesn't need to update inputValue dynamically.
+  // useRef ensures it doesn't update dynamically with defaultValue or value props.
   const initialInputValue = React.useRef(
-    getInputValue(defaultValue, multiple, getOptionLabel),
+    getInputValue(defaultValue ?? valueProp, multiple, getOptionLabel),
   ).current;
 
   const [value, setValueState] = useControlled({

packages/mui-material/src/useAutocomplete/useAutocomplete.test.js

@@ -415,4 +415,25 @@ describe('useAutocomplete', () => {
       expect(onInputChange.callCount).to.equal(0);
     });
   });
+
+  describe('prop: value', () => {
+    it('should not trigger onInputChange when value is provided', () => {
+      const onInputChange = spy();
+
+      function Test() {
+        const [value, setValue] = React.useState('foo');
+        const { getInputProps } = useAutocomplete({
+          value,
+          onChange: (event, valueParam) => setValue(valueParam),
+          onInputChange,
+          options: ['foo', 'bar'],
+        });
+
+        return <input {...getInputProps()} />;
+      }
+
+      render(<Test />);
+      expect(onInputChange.callCount).to.equal(0);
+    });
+  });
 });