[material-ui][Autocomplete] Cherry-pick #43189 (#44561)

Author: DiegoAndai

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

@@ -75,6 +75,8 @@ const pageSize = 5;
 const defaultIsActiveElementInListbox = (listboxRef) =>
   listboxRef.current !== null && listboxRef.current.parentElement?.contains(document.activeElement);
 
+const MULTIPLE_DEFAULT_VALUE = [];
+
 export function useAutocomplete(props) {
   const {
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -88,7 +90,7 @@ export function useAutocomplete(props) {
     clearOnBlur = !props.freeSolo,
     clearOnEscape = false,
     componentName = 'useAutocomplete',
-    defaultValue = props.multiple ? [] : null,
+    defaultValue = props.multiple ? MULTIPLE_DEFAULT_VALUE : null,
     disableClearable = false,
     disableCloseOnSelect = false,
     disabled: disabledProp,

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

@@ -362,9 +362,9 @@ describe('useAutocomplete', () => {
   });
 
   it('should allow tuples or arrays as value when multiple=false', () => {
-    function Test() {
-      const defaultValue = ['bar'];
+    const defaultValue = ['bar'];
 
+    function Test() {
       const { getClearProps, getInputProps } = useAutocomplete({
         defaultValue,
         disableClearable: false,

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

@@ -75,6 +75,8 @@ const pageSize = 5;
 const defaultIsActiveElementInListbox = (listboxRef) =>
   listboxRef.current !== null && listboxRef.current.parentElement?.contains(document.activeElement);
 
+const MULTIPLE_DEFAULT_VALUE = [];
+
 function useAutocomplete(props) {
   const {
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -88,7 +90,7 @@ function useAutocomplete(props) {
     clearOnBlur = !props.freeSolo,
     clearOnEscape = false,
     componentName = 'useAutocomplete',
-    defaultValue = props.multiple ? [] : null,
+    defaultValue = props.multiple ? MULTIPLE_DEFAULT_VALUE : null,
     disableClearable = false,
     disableCloseOnSelect = false,
     disabled: disabledProp,

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

@@ -362,9 +362,9 @@ describe('useAutocomplete', () => {
   });
 
   it('should allow tuples or arrays as value when multiple=false', () => {
-    function Test() {
-      const defaultValue = ['bar'];
+    const defaultValue = ['bar'];
 
+    function Test() {
       const { getClearProps, getInputProps } = useAutocomplete({
         defaultValue,
         disableClearable: false,