@mui/material 7.3.6 → 7.3.8

package/esm/internal/SwitchBase.js

@@ -135,7 +135,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
   };
   const handleInputChange = event => {
     // Workaround for https://github.com/facebook/react/issues/9023
-    if (event.nativeEvent.defaultPrevented) {
+    if (event.nativeEvent.defaultPrevented || readOnly) {
       return;
     }
     const newChecked = event.target.checked;
@@ -192,7 +192,6 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     additionalProps: {
       centerRipple: true,
       focusRipple: !disableFocusRipple,
-      disabled,
       role: undefined,
       tabIndex: null
     }

package/esm/locale/arEG.js

@@ -38,7 +38,7 @@ export const arEG = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'جار التحميل...',
+        loadingText: 'جار التحميل…',
         noOptionsText: 'لا يوجد خيارات',
         openText: 'فتح'
       }

package/esm/locale/arSA.js

@@ -38,7 +38,7 @@ export const arSA = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'جار التحميل...',
+        loadingText: 'جار التحميل…',
         noOptionsText: 'لا توجد خيارات',
         openText: 'فتح'
       }

package/esm/locale/arSD.js

@@ -38,7 +38,7 @@ export const arSD = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'جار التحميل...',
+        loadingText: 'جار التحميل…',
         noOptionsText: 'لا يوجد خيارات',
         openText: 'فتح'
       }

package/esm/locale/kuCKB.js

@@ -38,7 +38,7 @@ export const kuCKB = {
       defaultProps: {
         clearText: 'سڕینەوە',
         closeText: 'داخستن',
-        loadingText: 'لە بارکردندایە...',
+        loadingText: 'لە بارکردندایە…',
         noOptionsText: 'هیچ بژاردەیەک نیە',
         openText: 'کردنەوە'
       }

package/esm/locale/neNP.js

@@ -42,7 +42,7 @@ export const neNP = {
       defaultProps: {
         clearText: 'खाली गर्नुहोस्',
         closeText: 'बन्द गर्नुहोस्',
-        loadingText: 'लोड हुँदै...',
+        loadingText: 'लोड हुँदै…',
         noOptionsText: 'कुनै विकल्प छैन',
         openText: 'खोल्नुहोस्'
       }

package/esm/useAutocomplete/useAutocomplete.d.ts

@@ -362,7 +362,7 @@ export interface UseAutocompleteReturnValue<Value, Multiple extends boolean | un
    * @returns props that should be spread on the li element
    */
   getOptionProps: (renderedOption: UseAutocompleteRenderedOption<Value>) => React.HTMLAttributes<HTMLLIElement> & {
-    key: any;
+    key: React.Key;
   };
   /**
    * Id for the Autocomplete.

package/esm/useAutocomplete/useAutocomplete.js

@@ -486,10 +486,10 @@ function useAutocomplete(props) {
     }, [componentName]);
   }
   React.useEffect(() => {
-    if (filteredOptionsChanged || popupOpen) {
+    if (filteredOptionsChanged || popupOpen && !disableCloseOnSelect) {
       syncHighlightedIndex();
     }
-  }, [syncHighlightedIndex, filteredOptionsChanged, popupOpen]);
+  }, [syncHighlightedIndex, filteredOptionsChanged, popupOpen, disableCloseOnSelect]);
   const handleOpen = event => {
     if (open) {
       return;
@@ -584,9 +584,17 @@ function useAutocomplete(props) {
       handleClose(event, 'toggleInput');
     }
     let nextItem = focusedItem;
-    if (focusedItem === -1) {
-      if (inputValue === '' && direction === 'previous') {
-        nextItem = value.length - 1;
+
+    // When moving focus from the input to tags with ArrowLeft,
+    // always jump to the last tag (if any) from the input.
+    if (focusedItem === -1 && direction === 'previous') {
+      nextItem = value.length - 1;
+      // In freeSolo, clear any draft text so it doesn't "come back" later.
+      if (freeSolo && inputValue !== '') {
+        setInputValueState('');
+        if (onInputChange) {
+          onInputChange(event, '', 'reset');
+        }
       }
     } else {
       nextItem += direction === 'next' ? 1 : -1;
@@ -693,13 +701,34 @@ function useAutocomplete(props) {
           handleOpen(event);
           break;
         case 'ArrowLeft':
-          if (!multiple && renderValue && value != null) {
-            setFocusedItem(0);
-            focusItem(0);
-          } else {
-            handleFocusItem(event, 'previous');
+          {
+            const input = inputRef.current;
+            // Only handle ArrowLeft when the caret is at the start of the input.
+            // Otherwise let the browser move the caret normally.
+            const caretAtStart = input && input.selectionStart === 0 && input.selectionEnd === 0;
+            if (!caretAtStart) {
+              // Let the browser handle normal cursor movement
+              return;
+            }
+
+            // Single-value rendering: move focus from input to the single tag.
+            if (!multiple && renderValue && value != null) {
+              // Moving from input to single tag; clear freeSolo draft text,
+              // so it doesn't reappear when we move back.
+              if (freeSolo && inputValue !== '') {
+                setInputValueState('');
+                if (onInputChange) {
+                  onInputChange(event, '', 'reset');
+                }
+              }
+              setFocusedItem(0);
+              focusItem(0);
+            } else {
+              // Multi-value: delegate to tag navigation helper.
+              handleFocusItem(event, 'previous');
+            }
+            break;
           }
-          break;
         case 'ArrowRight':
           if (!multiple && renderValue) {
             setFocusedItem(-1);
@@ -757,10 +786,10 @@ function useAutocomplete(props) {
               option: value[index]
             });
           }
-          if (!multiple && renderValue && !readOnly) {
-            setValueState(null);
-            setFocusedItem(-1);
-            focusItem(-1);
+          if (!multiple && renderValue && !readOnly && inputValue === '') {
+            handleValue(event, null, 'removeOption', {
+              option: value
+            });
           }
           break;
         case 'Delete':
@@ -773,10 +802,12 @@ function useAutocomplete(props) {
               option: value[index]
             });
           }
-          if (!multiple && renderValue && !readOnly) {
-            setValueState(null);
-            setFocusedItem(-1);
-            focusItem(-1);
+          if (!multiple && renderValue && !readOnly && inputValue === '') {
+            // Single-value rendering: Delete on empty input removes
+            // the single rendered option, same "removeOption" reason as multiple.
+            handleValue(event, null, 'removeOption', {
+              option: value
+            });
           }
           break;
         default:
@@ -826,7 +857,9 @@ function useAutocomplete(props) {
       }
     }
     if (newValue === '') {
-      if (!disableClearable && !multiple) {
+      // For normal single-select, clearing the input clears the value.
+      // For renderValue (chip-style single), only Backspace/Delete clear the value.
+      if (!disableClearable && !multiple && !renderValue) {
         handleValue(event, null, 'clear');
       }
     } else {
@@ -1010,6 +1043,7 @@ function useAutocomplete(props) {
       role: 'listbox',
       id: `${id}-listbox`,
       'aria-labelledby': `${id}-label`,
+      'aria-multiselectable': multiple || undefined,
       ref: handleListboxRef,
       onMouseDown: event => {
         // Prevent blur

package/esm/version/index.js

@@ -1,6 +1,6 @@
-export const version = "7.3.6";
+export const version = "7.3.8";
 export const major = Number("7");
 export const minor = Number("3");
-export const patch = Number("6");
+export const patch = Number("8");
 export const prerelease = undefined;
 export default version;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v7.3.6
+ * @mui/material v7.3.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internal/SwitchBase.js

@@ -142,7 +142,7 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
   };
   const handleInputChange = event => {
     // Workaround for https://github.com/facebook/react/issues/9023
-    if (event.nativeEvent.defaultPrevented) {
+    if (event.nativeEvent.defaultPrevented || readOnly) {
       return;
     }
     const newChecked = event.target.checked;
@@ -199,7 +199,6 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     additionalProps: {
       centerRipple: true,
       focusRipple: !disableFocusRipple,
-      disabled,
       role: undefined,
       tabIndex: null
     }

package/locale/arEG.js

@@ -44,7 +44,7 @@ const arEG = exports.arEG = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'جار التحميل...',
+        loadingText: 'جار التحميل…',
         noOptionsText: 'لا يوجد خيارات',
         openText: 'فتح'
       }

package/locale/arSA.js

@@ -44,7 +44,7 @@ const arSA = exports.arSA = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'جار التحميل...',
+        loadingText: 'جار التحميل…',
         noOptionsText: 'لا توجد خيارات',
         openText: 'فتح'
       }

package/locale/arSD.js

@@ -44,7 +44,7 @@ const arSD = exports.arSD = {
       defaultProps: {
         clearText: 'مسح',
         closeText: 'إغلاق',
-        loadingText: 'جار التحميل...',
+        loadingText: 'جار التحميل…',
         noOptionsText: 'لا يوجد خيارات',
         openText: 'فتح'
       }

package/locale/kuCKB.js

@@ -44,7 +44,7 @@ const kuCKB = exports.kuCKB = {
       defaultProps: {
         clearText: 'سڕینەوە',
         closeText: 'داخستن',
-        loadingText: 'لە بارکردندایە...',
+        loadingText: 'لە بارکردندایە…',
         noOptionsText: 'هیچ بژاردەیەک نیە',
         openText: 'کردنەوە'
       }

package/locale/neNP.js

@@ -48,7 +48,7 @@ const neNP = exports.neNP = {
       defaultProps: {
         clearText: 'खाली गर्नुहोस्',
         closeText: 'बन्द गर्नुहोस्',
-        loadingText: 'लोड हुँदै...',
+        loadingText: 'लोड हुँदै…',
         noOptionsText: 'कुनै विकल्प छैन',
         openText: 'खोल्नुहोस्'
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "7.3.6",
+  "version": "7.3.8",
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
   "keywords": [
@@ -25,18 +25,18 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.4",
+    "@babel/runtime": "^7.28.6",
     "@popperjs/core": "^2.11.8",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
-    "csstype": "^3.1.3",
+    "csstype": "^3.2.3",
     "prop-types": "^15.8.1",
-    "react-is": "^19.2.0",
+    "react-is": "^19.2.3",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^7.3.6",
-    "@mui/system": "^7.3.6",
-    "@mui/types": "^7.4.9",
-    "@mui/utils": "^7.3.6"
+    "@mui/core-downloads-tracker": "^7.3.8",
+    "@mui/system": "^7.3.8",
+    "@mui/types": "^7.4.11",
+    "@mui/utils": "^7.3.8"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -44,7 +44,7 @@
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@mui/material-pigment-css": "^7.3.6"
+    "@mui/material-pigment-css": "^7.3.8"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/useAutocomplete/useAutocomplete.d.ts

@@ -362,7 +362,7 @@ export interface UseAutocompleteReturnValue<Value, Multiple extends boolean | un
    * @returns props that should be spread on the li element
    */
   getOptionProps: (renderedOption: UseAutocompleteRenderedOption<Value>) => React.HTMLAttributes<HTMLLIElement> & {
-    key: any;
+    key: React.Key;
   };
   /**
    * Id for the Autocomplete.

package/useAutocomplete/useAutocomplete.js

@@ -494,10 +494,10 @@ function useAutocomplete(props) {
     }, [componentName]);
   }
   React.useEffect(() => {
-    if (filteredOptionsChanged || popupOpen) {
+    if (filteredOptionsChanged || popupOpen && !disableCloseOnSelect) {
       syncHighlightedIndex();
     }
-  }, [syncHighlightedIndex, filteredOptionsChanged, popupOpen]);
+  }, [syncHighlightedIndex, filteredOptionsChanged, popupOpen, disableCloseOnSelect]);
   const handleOpen = event => {
     if (open) {
       return;
@@ -592,9 +592,17 @@ function useAutocomplete(props) {
       handleClose(event, 'toggleInput');
     }
     let nextItem = focusedItem;
-    if (focusedItem === -1) {
-      if (inputValue === '' && direction === 'previous') {
-        nextItem = value.length - 1;
+
+    // When moving focus from the input to tags with ArrowLeft,
+    // always jump to the last tag (if any) from the input.
+    if (focusedItem === -1 && direction === 'previous') {
+      nextItem = value.length - 1;
+      // In freeSolo, clear any draft text so it doesn't "come back" later.
+      if (freeSolo && inputValue !== '') {
+        setInputValueState('');
+        if (onInputChange) {
+          onInputChange(event, '', 'reset');
+        }
       }
     } else {
       nextItem += direction === 'next' ? 1 : -1;
@@ -701,13 +709,34 @@ function useAutocomplete(props) {
           handleOpen(event);
           break;
         case 'ArrowLeft':
-          if (!multiple && renderValue && value != null) {
-            setFocusedItem(0);
-            focusItem(0);
-          } else {
-            handleFocusItem(event, 'previous');
+          {
+            const input = inputRef.current;
+            // Only handle ArrowLeft when the caret is at the start of the input.
+            // Otherwise let the browser move the caret normally.
+            const caretAtStart = input && input.selectionStart === 0 && input.selectionEnd === 0;
+            if (!caretAtStart) {
+              // Let the browser handle normal cursor movement
+              return;
+            }
+
+            // Single-value rendering: move focus from input to the single tag.
+            if (!multiple && renderValue && value != null) {
+              // Moving from input to single tag; clear freeSolo draft text,
+              // so it doesn't reappear when we move back.
+              if (freeSolo && inputValue !== '') {
+                setInputValueState('');
+                if (onInputChange) {
+                  onInputChange(event, '', 'reset');
+                }
+              }
+              setFocusedItem(0);
+              focusItem(0);
+            } else {
+              // Multi-value: delegate to tag navigation helper.
+              handleFocusItem(event, 'previous');
+            }
+            break;
           }
-          break;
         case 'ArrowRight':
           if (!multiple && renderValue) {
             setFocusedItem(-1);
@@ -765,10 +794,10 @@ function useAutocomplete(props) {
               option: value[index]
             });
           }
-          if (!multiple && renderValue && !readOnly) {
-            setValueState(null);
-            setFocusedItem(-1);
-            focusItem(-1);
+          if (!multiple && renderValue && !readOnly && inputValue === '') {
+            handleValue(event, null, 'removeOption', {
+              option: value
+            });
           }
           break;
         case 'Delete':
@@ -781,10 +810,12 @@ function useAutocomplete(props) {
               option: value[index]
             });
           }
-          if (!multiple && renderValue && !readOnly) {
-            setValueState(null);
-            setFocusedItem(-1);
-            focusItem(-1);
+          if (!multiple && renderValue && !readOnly && inputValue === '') {
+            // Single-value rendering: Delete on empty input removes
+            // the single rendered option, same "removeOption" reason as multiple.
+            handleValue(event, null, 'removeOption', {
+              option: value
+            });
           }
           break;
         default:
@@ -834,7 +865,9 @@ function useAutocomplete(props) {
       }
     }
     if (newValue === '') {
-      if (!disableClearable && !multiple) {
+      // For normal single-select, clearing the input clears the value.
+      // For renderValue (chip-style single), only Backspace/Delete clear the value.
+      if (!disableClearable && !multiple && !renderValue) {
         handleValue(event, null, 'clear');
       }
     } else {
@@ -1018,6 +1051,7 @@ function useAutocomplete(props) {
       role: 'listbox',
       id: `${id}-listbox`,
       'aria-labelledby': `${id}-label`,
+      'aria-multiselectable': multiple || undefined,
       ref: handleListboxRef,
       onMouseDown: event => {
         // Prevent blur

package/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "7.3.6";
+const version = exports.version = "7.3.8";
 const major = exports.major = Number("7");
 const minor = exports.minor = Number("3");
-const patch = exports.patch = Number("6");
+const patch = exports.patch = Number("8");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;