@mui/material 7.3.5 → 7.3.7

package/useAutocomplete/useAutocomplete.js

@@ -473,7 +473,7 @@ function useAutocomplete(props) {
   filteredOptions.length,
   // Don't sync the highlighted index with the value when multiple
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  multiple ? false : value, filterSelectedOptions, changeHighlightedIndex, setHighlightedIndex, popupOpen, inputValue, multiple]);
+  multiple ? false : value, changeHighlightedIndex, setHighlightedIndex, popupOpen, inputValue, multiple]);
   const handleListboxRef = (0, _useEventCallback.default)(node => {
     (0, _setRef.default)(listboxRef, node);
     if (!node) {
@@ -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,14 +709,37 @@ function useAutocomplete(props) {
           handleOpen(event);
           break;
         case 'ArrowLeft':
-          if (!multiple && renderValue) {
-            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);
             focusItem(-1);
           } else {
             handleFocusItem(event, 'next');
@@ -763,9 +794,10 @@ function useAutocomplete(props) {
               option: value[index]
             });
           }
-          if (!multiple && renderValue && !readOnly) {
-            setValueState(null);
-            focusItem(-1);
+          if (!multiple && renderValue && !readOnly && inputValue === '') {
+            handleValue(event, null, 'removeOption', {
+              option: value
+            });
           }
           break;
         case 'Delete':
@@ -778,9 +810,12 @@ function useAutocomplete(props) {
               option: value[index]
             });
           }
-          if (!multiple && renderValue && !readOnly) {
-            setValueState(null);
-            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:
@@ -789,6 +824,15 @@ function useAutocomplete(props) {
   };
   const handleFocus = event => {
     setFocused(true);
+
+    // When focusing the input, ensure any previously focused item (chip)
+    // is cleared so the input receives the visible caret and the
+    // input-focused styling is applied.
+    if (focusedItem !== -1) {
+      setFocusedItem(-1);
+      // Ensure DOM focus lands on the input
+      focusItem(-1);
+    }
     if (openOnFocus && !ignoreFocus.current) {
       handleOpen(event);
     }
@@ -821,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 {

package/utils/getActiveElement.d.ts

@@ -0,0 +1,2 @@
+import getActiveElement from '@mui/utils/getActiveElement';
+export default getActiveElement;

package/utils/getActiveElement.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _getActiveElement = _interopRequireDefault(require("@mui/utils/getActiveElement"));
+var _default = exports.default = _getActiveElement.default;

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.5";
+const version = exports.version = "7.3.7";
 const major = exports.major = Number("7");
 const minor = exports.minor = Number("3");
-const patch = exports.patch = Number("5");
+const patch = exports.patch = Number("7");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;