@sitecore/sc-contenthub-blok 1.0.14 → 1.0.27

package/node_modules/@mui/material/useAutocomplete/useAutocomplete.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.createFilterOptions = createFilterOptions;
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _contains = _interopRequireDefault(require("@mui/utils/contains"));
 var _setRef = _interopRequireDefault(require("@mui/utils/setRef"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
@@ -63,7 +64,8 @@ const defaultFilterOptions = createFilterOptions();
 
 // Number of options to jump in list box when `Page Up` and `Page Down` keys are used.
 const pageSize = 5;
-const defaultIsActiveElementInListbox = listboxRef => listboxRef.current !== null && listboxRef.current.parentElement?.contains(document.activeElement);
+const defaultIsActiveElementInListbox = listboxRef => listboxRef.current !== null && (0, _contains.default)(listboxRef.current.parentElement, document.activeElement);
+const defaultIsOptionEqualToValue = (option, value) => option === value;
 const MULTIPLE_DEFAULT_VALUE = [];
 function getInputValue(value, multiple, getOptionLabel, renderValue) {
   if (multiple || value == null || renderValue) {
@@ -102,7 +104,7 @@ function useAutocomplete(props) {
     id: idProp,
     includeInputInList = false,
     inputValue: inputValueProp,
-    isOptionEqualToValue = (option, value) => option === value,
+    isOptionEqualToValue = defaultIsOptionEqualToValue,
     multiple = false,
     onChange,
     onClose,
@@ -134,11 +136,26 @@ function useAutocomplete(props) {
   const firstFocus = React.useRef(true);
   const inputRef = React.useRef(null);
   const listboxRef = React.useRef(null);
+  const windowLostFocus = React.useRef(false);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [focusedItem, setFocusedItem] = React.useState(-1);
   const defaultHighlighted = autoHighlight ? 0 : -1;
   const highlightedIndexRef = React.useRef(defaultHighlighted);
 
+  // Tracks how the current highlight was set:
+  // - 'keyboard' — arrow keys, Home/End, PageUp/PageDown
+  // - 'mouse'    — handleOptionMouseMove
+  // - 'touch'    — handleOptionTouchStart
+  // - null       — programmatic (autoHighlight, value sync)
+  //
+  // This lets handleBlur and the Enter handler distinguish intentional
+  // interactions from incidental ones — e.g. autoSelect should not commit
+  // a highlight that came from a casual mouse hover.
+  /** @type {React.RefObject<AutocompleteHighlightChangeReason | null>} */
+  const highlightReasonRef = React.useRef(null);
+  const touchScrolledRef = React.useRef(false);
+  const isTouchRef = React.useRef(false);
+
   // Calculate the initial inputValue on mount only.
   // useRef ensures it doesn't update dynamically with defaultValue or value props.
   const initialInputValue = React.useRef(getInputValue(defaultValue ?? valueProp, multiple, getOptionLabel)).current;
@@ -155,10 +172,12 @@ function useAutocomplete(props) {
   });
   const [focused, setFocused] = React.useState(false);
   const resetInputValue = React.useCallback((event, newValue, reason) => {
-    // retain current `inputValue` if new option isn't selected and `clearOnBlur` is false
-    // When `multiple` is enabled, `newValue` is an array of all selected items including the newly selected item
+    // Retain the current `inputValue` when no new option is selected and `clearOnBlur` is false.
+    // In `multiple` mode, `newValue` is the next value array, so only length growth counts as a selection.
     const isOptionSelected = multiple ? value.length < newValue.length : newValue !== null;
-    if (!isOptionSelected && !clearOnBlur) {
+    // A controlled single-value `freeSolo` reset to `null` should still clear the input.
+    const shouldClearOnReset = reason === 'reset' && freeSolo && !multiple && newValue === null;
+    if (!isOptionSelected && !clearOnBlur && !shouldClearOnReset) {
       return;
     }
     const newInputValue = getInputValue(newValue, multiple, getOptionLabel, renderValue);
@@ -169,7 +188,7 @@ function useAutocomplete(props) {
     if (onInputChange) {
       onInputChange(event, newInputValue, reason);
     }
-  }, [getOptionLabel, inputValue, multiple, onInputChange, setInputValueState, clearOnBlur, value, renderValue]);
+  }, [getOptionLabel, inputValue, multiple, onInputChange, setInputValueState, clearOnBlur, freeSolo, value, renderValue]);
   const [open, setOpenState] = (0, _useControlled.default)({
     controlled: openProp,
     default: false,
@@ -179,8 +198,30 @@ function useAutocomplete(props) {
   const [inputPristine, setInputPristine] = React.useState(true);
   const inputValueIsSelectedValue = !multiple && value != null && inputValue === getOptionLabel(value);
   const popupOpen = open && !readOnly;
+  const selectedValues = React.useMemo(() => {
+    if (multiple) {
+      return value;
+    }
+    if (value != null) {
+      return [value];
+    }
+    return [];
+  }, [multiple, value]);
+  const selectedValuesSet = React.useMemo(() => {
+    // Fast path for the default strict equality comparator to avoid O(n^2) option checks.
+    if (isOptionEqualToValue !== defaultIsOptionEqualToValue || selectedValues.length === 0) {
+      return null;
+    }
+    return new Set(selectedValues);
+  }, [isOptionEqualToValue, selectedValues]);
+  const isOptionSelected = React.useCallback(option => {
+    if (selectedValuesSet) {
+      return selectedValuesSet.has(option);
+    }
+    return selectedValues.some(value2 => value2 != null && isOptionEqualToValue(option, value2));
+  }, [isOptionEqualToValue, selectedValues, selectedValuesSet]);
   const filteredOptions = popupOpen ? filterOptions(options.filter(option => {
-    if (filterSelectedOptions && (multiple ? value : [value]).some(value2 => value2 !== null && isOptionEqualToValue(option, value2))) {
+    if (filterSelectedOptions && isOptionSelected(option)) {
       return false;
     }
     return true;
@@ -213,9 +254,7 @@ function useAutocomplete(props) {
     if (itemToFocus === -1) {
       inputRef.current.focus();
     } else {
-      // Using `data-tag-index` for deprecated `renderTags`. Remove when `renderTags` is gone.
-      const indexType = renderValue ? 'data-item-index' : 'data-tag-index';
-      anchorEl.querySelector(`[${indexType}="${itemToFocus}"]`).focus();
+      anchorEl.querySelector(`[data-item-index="${itemToFocus}"]`).focus();
     }
   });
 
@@ -256,22 +295,17 @@ function useAutocomplete(props) {
       }
     }
   }
-  const setHighlightedIndex = (0, _useEventCallback.default)(({
-    event,
+  const syncHighlightedIndexToDOM = (0, _useEventCallback.default)(({
     index,
-    reason
+    reason,
+    preserveScroll = false
   }) => {
-    highlightedIndexRef.current = index;
-
     // does the index exist?
     if (index === -1) {
       inputRef.current.removeAttribute('aria-activedescendant');
     } else {
       inputRef.current.setAttribute('aria-activedescendant', `${id}-option-${index}`);
     }
-    if (onHighlightChange && ['mouse', 'keyboard', 'touch'].includes(reason)) {
-      onHighlightChange(event, index === -1 ? null : filteredOptions[index], reason);
-    }
     if (!listboxRef.current) {
       return;
     }
@@ -290,7 +324,9 @@ function useAutocomplete(props) {
       return;
     }
     if (index === -1) {
-      listboxNode.scrollTop = 0;
+      if (!preserveScroll) {
+        listboxNode.scrollTop = 0;
+      }
       return;
     }
     const option = listboxRef.current.querySelector(`[data-option-index="${index}"]`);
@@ -318,15 +354,46 @@ function useAutocomplete(props) {
       }
     }
   });
+  const setHighlightedIndex = (0, _useEventCallback.default)(({
+    event,
+    index,
+    reason,
+    preserveScroll = false
+  }) => {
+    highlightedIndexRef.current = index;
+    highlightReasonRef.current = reason ?? null;
+    if (onHighlightChange && ['mouse', 'keyboard', 'touch'].includes(reason)) {
+      onHighlightChange(event, index === -1 ? null : filteredOptions[index], reason);
+    }
+    syncHighlightedIndexToDOM({
+      index,
+      reason,
+      preserveScroll
+    });
+  });
+  const setHighlightedIndexFromSync = (0, _useEventCallback.default)(({
+    index
+  }) => {
+    highlightedIndexRef.current = index;
+    syncHighlightedIndexToDOM({
+      index,
+      reason: highlightReasonRef.current
+    });
+  });
   const changeHighlightedIndex = (0, _useEventCallback.default)(({
     event,
     diff,
     direction = 'next',
-    reason
+    reason,
+    preserveScroll
   }) => {
     if (!popupOpen) {
       return;
     }
+    if (reason === 'keyboard') {
+      touchScrolledRef.current = false;
+      isTouchRef.current = false;
+    }
     const getNextIndex = () => {
       const maxIndex = filteredOptions.length - 1;
       if (diff === 'reset') {
@@ -363,7 +430,8 @@ function useAutocomplete(props) {
     setHighlightedIndex({
       index: nextIndex,
       reason,
-      event
+      event,
+      preserveScroll
     });
 
     // Sync the content of the input with the highlighted option.
@@ -417,15 +485,24 @@ function useAutocomplete(props) {
     // If it exists and the value and the inputValue haven't changed, just update its index, otherwise continue execution
     const previousHighlightedOptionIndex = getPreviousHighlightedOptionIndex();
     if (previousHighlightedOptionIndex !== -1) {
-      highlightedIndexRef.current = previousHighlightedOptionIndex;
+      // Keep the original highlight reason while re-syncing the DOM state.
+      // The highlighted option still exists after the filteredOptions array changed
+      // (e.g. async fetch returns new options while the user is mid-navigation),
+      // so the original interaction reason (keyboard, mouse, etc.) still applies.
+      setHighlightedIndexFromSync({
+        index: previousHighlightedOptionIndex
+      });
       return;
     }
     const valueItem = multiple ? value[0] : value;
 
     // The popup is empty, reset
     if (filteredOptions.length === 0 || valueItem == null) {
+      // Preserve scroll when new options are appended without changing the current filter.
+      const isAppendOnly = filteredOptionsChanged && previousProps.inputValue === inputValue && previousProps.filteredOptions?.length > 0 && filteredOptions.length > previousProps.filteredOptions.length && previousProps.filteredOptions.every((option, index) => getOptionLabel(option) === getOptionLabel(filteredOptions[index]));
       changeHighlightedIndex({
-        diff: 'reset'
+        diff: 'reset',
+        preserveScroll: isAppendOnly
       });
       return;
     }
@@ -437,8 +514,12 @@ function useAutocomplete(props) {
     if (valueItem != null) {
       const currentOption = filteredOptions[highlightedIndexRef.current];
 
-      // Keep the current highlighted index if possible
-      if (multiple && currentOption && value.findIndex(val => isOptionEqualToValue(currentOption, val)) !== -1) {
+      // Keep the current selected highlight while the popup stays open;
+      // on reopen, resync from the selected value.
+      if (multiple && currentOption && value.findIndex(val => isOptionEqualToValue(currentOption, val)) !== -1 && previousProps.filteredOptions?.length > 0) {
+        setHighlightedIndexFromSync({
+          index: highlightedIndexRef.current
+        });
         return;
       }
       const itemIndex = filteredOptions.findIndex(optionItem => isOptionEqualToValue(optionItem, valueItem));
@@ -473,7 +554,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, setHighlightedIndexFromSync, popupOpen, inputValue, multiple]);
   const handleListboxRef = (0, _useEventCallback.default)(node => {
     (0, _setRef.default)(listboxRef, node);
     if (!node) {
@@ -494,16 +575,32 @@ function useAutocomplete(props) {
     }, [componentName]);
   }
   React.useEffect(() => {
-    if (filteredOptionsChanged) {
+    if (filteredOptionsChanged || popupOpen && !disableCloseOnSelect) {
       syncHighlightedIndex();
     }
-  }, [syncHighlightedIndex, filteredOptionsChanged]);
+  }, [syncHighlightedIndex, filteredOptionsChanged, popupOpen, disableCloseOnSelect]);
+
+  // Listen for browser window blur to detect when the user switches tabs or windows.
+  // This helps prevent the popup from reopening automatically when the window regains focus.
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+    const handleWindowBlur = () => {
+      windowLostFocus.current = true;
+    };
+    window.addEventListener('blur', handleWindowBlur);
+    return () => {
+      window.removeEventListener('blur', handleWindowBlur);
+    };
+  }, []);
   const handleOpen = event => {
     if (open) {
       return;
     }
     setOpenState(true);
     setInputPristine(true);
+    isTouchRef.current = false;
     if (onOpen) {
       onOpen(event);
     }
@@ -513,6 +610,8 @@ function useAutocomplete(props) {
       return;
     }
     setOpenState(false);
+    touchScrolledRef.current = false;
+    highlightReasonRef.current = null;
     if (onClose) {
       onClose(event, reason);
     }
@@ -530,7 +629,6 @@ function useAutocomplete(props) {
     }
     setValueState(newValue);
   };
-  const isTouch = React.useRef(false);
   const selectNewValue = (event, option, reasonProp = 'selectOption', origin = 'options') => {
     let reason = reasonProp;
     let newValue = option;
@@ -557,7 +655,7 @@ function useAutocomplete(props) {
     if (!disableCloseOnSelect && (!event || !event.ctrlKey && !event.metaKey)) {
       handleClose(event, reason);
     }
-    if (blurOnSelect === true || blurOnSelect === 'touch' && isTouch.current || blurOnSelect === 'mouse' && !isTouch.current) {
+    if (blurOnSelect === true || blurOnSelect === 'touch' && isTouchRef.current || blurOnSelect === 'mouse' && !isTouchRef.current) {
       inputRef.current.blur();
     }
   };
@@ -571,10 +669,7 @@ function useAutocomplete(props) {
       if (direction === 'next' && nextFocus === value.length || direction === 'previous' && nextFocus === -1) {
         return -1;
       }
-
-      // Using `data-tag-index` for deprecated `renderTags`. Remove when `renderTags` is removed.
-      const indexType = renderValue ? 'data-item-index' : 'data-tag-index';
-      const option = anchorEl.querySelector(`[${indexType}="${nextFocus}"]`);
+      const option = anchorEl.querySelector(`[data-item-index="${nextFocus}"]`);
 
       // Same logic as MenuList.js
       if (!option || !option.hasAttribute('tabindex') || option.disabled || option.getAttribute('aria-disabled') === 'true') {
@@ -592,9 +687,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;
@@ -610,7 +713,6 @@ function useAutocomplete(props) {
     focusItem(nextItem);
   };
   const handleClear = event => {
-    ignoreFocus.current = true;
     setInputValueState('');
     if (onInputChange) {
       onInputChange(event, '', 'clear');
@@ -701,43 +803,84 @@ 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');
           }
           break;
         case 'Enter':
-          if (highlightedIndexRef.current !== -1 && popupOpen) {
-            const option = filteredOptions[highlightedIndexRef.current];
-            const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
+          {
+            // In freeSolo, only select the highlighted option if the user hasn't
+            // typed new text (inputPristine) or explicitly interacted with an option
+            // (keyboard, mouse, or touch — any non-null reason). This lets typed
+            // text win over a programmatic highlight (reason=null, e.g. from
+            // syncHighlightedIndex matching a previous value) while still honoring
+            // deliberate user interactions like hovering a suggestion then pressing Enter.
+            const shouldSelectHighlighted = !freeSolo || inputPristine || highlightReasonRef.current !== null;
+            if (highlightedIndexRef.current !== -1 && popupOpen && shouldSelectHighlighted &&
+            // After a touch-scroll the highlight is stale (the user scrolled
+            // past it), so skip selection until the next deliberate interaction.
+            !touchScrolledRef.current) {
+              const option = filteredOptions[highlightedIndexRef.current];
+              const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
 
-            // Avoid early form validation, let the end-users continue filling the form.
-            event.preventDefault();
-            if (disabled) {
-              return;
-            }
-            selectNewValue(event, option, 'selectOption');
+              // Avoid early form validation, let the end-users continue filling the form.
+              event.preventDefault();
+              if (disabled) {
+                return;
+              }
+              selectNewValue(event, option, 'selectOption');
 
-            // Move the selection to the end.
-            if (autoComplete) {
-              inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
-            }
-          } else if (freeSolo && inputValue !== '' && inputValueIsSelectedValue === false) {
-            if (multiple) {
-              // Allow people to add new values before they submit the form.
+              // Move the selection to the end.
+              if (autoComplete) {
+                inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
+              }
+            } else if (freeSolo && inputValue !== '' && inputValueIsSelectedValue === false) {
+              if (multiple) {
+                // Allow people to add new values before they submit the form.
+                event.preventDefault();
+              }
+              selectNewValue(event, inputValue, 'createOption', 'freeSolo');
+            } else if (popupOpen && touchScrolledRef.current) {
+              // The highlight is stale from a touch-scroll - close without selecting.
               event.preventDefault();
+              // This happens on Enter, but re-using "escape" as the closest `AutocompleteCloseReason`
+              // to avoid creating a new reason
+              handleClose(event, 'escape');
             }
-            selectNewValue(event, inputValue, 'createOption', 'freeSolo');
+            break;
           }
-          break;
         case 'Escape':
           if (popupOpen) {
             // Avoid Opera to exit fullscreen mode.
@@ -763,9 +906,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 +922,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,12 +936,29 @@ 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 the window previously lost focus while the popup was open,
+    // ignore this focus event to prevent unintended reopening.
+    // Reset the flag so normal focus behavior resumes.
+    if (windowLostFocus.current) {
+      windowLostFocus.current = false;
+      return;
+    }
     if (openOnFocus && !ignoreFocus.current) {
       handleOpen(event);
     }
   };
   const handleBlur = event => {
-    // Ignore the event when using the scrollbar with IE11
+    // Ignore the event when using the scrollbar with IE 11
     if (unstable_isActiveElementInListbox(listboxRef)) {
       inputRef.current.focus();
       return;
@@ -802,7 +966,12 @@ function useAutocomplete(props) {
     setFocused(false);
     firstFocus.current = true;
     ignoreFocus.current = false;
-    if (autoSelect && highlightedIndexRef.current !== -1 && popupOpen) {
+
+    // Auto-select the highlighted option on blur, but only if the highlight
+    // came from keyboard navigation or was set programmatically (autoHighlight).
+    // Mouse hover and touch should not trigger selection — the user may have
+    // moved the pointer over an option without intending to commit to it.
+    if (autoSelect && highlightedIndexRef.current !== -1 && popupOpen && highlightReasonRef.current !== 'mouse' && highlightReasonRef.current !== 'touch') {
       selectNewValue(event, filteredOptions[highlightedIndexRef.current], 'blur');
     } else if (autoSelect && freeSolo && inputValue !== '') {
       selectNewValue(event, inputValue, 'blur', 'freeSolo');
@@ -813,20 +982,29 @@ function useAutocomplete(props) {
   };
   const handleInputChange = event => {
     const newValue = event.target.value;
-    if (inputValue !== newValue) {
+    const valueChanged = inputValue !== newValue;
+    if (valueChanged) {
       setInputValueState(newValue);
-      setInputPristine(false);
+      touchScrolledRef.current = false;
       if (onInputChange) {
         onInputChange(event, newValue, 'input');
       }
     }
     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 {
       handleOpen(event);
     }
+
+    // Called after handleOpen so it overrides handleOpen's setInputPristine(true)
+    // when the first keystroke also opens the popup.
+    if (valueChanged) {
+      setInputPristine(false);
+    }
   };
   const handleOptionMouseMove = event => {
     const index = Number(event.currentTarget.getAttribute('data-option-index'));
@@ -836,20 +1014,35 @@ function useAutocomplete(props) {
         index,
         reason: 'mouse'
       });
+    } else {
+      // The option is already highlighted (e.g. programmatically via autoHighlight),
+      // but the user moved the mouse over it — mark as mouse-initiated so
+      // autoSelect on blur correctly treats this as incidental hover.
+      highlightReasonRef.current = 'mouse';
+    }
+    // Don't clear the touch-scroll guard while touch state is still latched.
+    // After a touch gesture, browsers may fire compatibility mousemove
+    // events; if those cleared the guard immediately, later compat events in
+    // the same sequence could be misclassified as a real mouse interaction.
+    // Touch state is cleared by the next deliberate interaction
+    // (keyboard nav, handleOptionClick, or handleOpen).
+    if (!isTouchRef.current) {
+      touchScrolledRef.current = false;
     }
   };
   const handleOptionTouchStart = event => {
+    touchScrolledRef.current = false;
     setHighlightedIndex({
       event,
       index: Number(event.currentTarget.getAttribute('data-option-index')),
       reason: 'touch'
     });
-    isTouch.current = true;
+    isTouchRef.current = true;
   };
   const handleOptionClick = event => {
     const index = Number(event.currentTarget.getAttribute('data-option-index'));
     selectNewValue(event, filteredOptions[index], 'selectOption');
-    isTouch.current = false;
+    isTouchRef.current = false;
   };
   const handleItemDelete = index => event => {
     const newValue = value.slice();
@@ -874,7 +1067,11 @@ function useAutocomplete(props) {
   // Prevent input blur when interacting with the combobox
   const handleMouseDown = event => {
     // Prevent focusing the input if click is anywhere outside the Autocomplete
-    if (!event.currentTarget.contains(event.target)) {
+    if (!(0, _contains.default)(event.currentTarget, event.target)) {
+      return;
+    }
+    // Don't interfere with interactions outside the input area (e.g. helper text)
+    if (anchorEl && !(0, _contains.default)(anchorEl, event.target)) {
       return;
     }
     if (event.target.getAttribute('id') !== id) {
@@ -885,7 +1082,11 @@ function useAutocomplete(props) {
   // Focus the input when interacting with the combobox
   const handleClick = event => {
     // Prevent focusing the input if click is anywhere outside the Autocomplete
-    if (!event.currentTarget.contains(event.target)) {
+    if (!(0, _contains.default)(event.currentTarget, event.target)) {
+      return;
+    }
+    // Don't interfere with interactions outside the input area (e.g. helper text)
+    if (anchorEl && !(0, _contains.default)(anchorEl, event.target)) {
       return;
     }
     inputRef.current.focus();
@@ -895,7 +1096,9 @@ function useAutocomplete(props) {
     firstFocus.current = false;
   };
   const handleInputMouseDown = event => {
-    if (!disabledProp && (inputValue === '' || !open)) {
+    if (!disabledProp && (inputValue === '' || !open) &&
+    // Only handle event when the main button is pressed (left click).
+    event.button === 0) {
       handlePopupIndicator(event);
     }
   };
@@ -967,7 +1170,10 @@ function useAutocomplete(props) {
     getClearProps: () => ({
       tabIndex: -1,
       type: 'button',
-      onClick: handleClear
+      onClick: event => {
+        ignoreFocus.current = true;
+        handleClear(event);
+      }
     }),
     getItemProps: ({
       index = 0
@@ -975,11 +1181,7 @@ function useAutocomplete(props) {
       ...(multiple && {
         key: index
       }),
-      ...(renderValue ? {
-        'data-item-index': index
-      } : {
-        'data-tag-index': index
-      }),
+      'data-item-index': index,
       tabIndex: -1,
       ...(!readOnly && {
         onDelete: multiple ? handleItemDelete(index) : handleSingleItemDelete
@@ -990,32 +1192,27 @@ function useAutocomplete(props) {
       type: 'button',
       onClick: handlePopupIndicator
     }),
-    // deprecated
-    getTagProps: ({
-      index
-    }) => ({
-      key: index,
-      'data-tag-index': index,
-      tabIndex: -1,
-      ...(!readOnly && {
-        onDelete: handleItemDelete(index)
-      })
-    }),
     getListboxProps: () => ({
       role: 'listbox',
       id: `${id}-listbox`,
       'aria-labelledby': `${id}-label`,
+      'aria-multiselectable': multiple || undefined,
       ref: handleListboxRef,
       onMouseDown: event => {
         // Prevent blur
         event.preventDefault();
+      },
+      onScroll: () => {
+        if (isTouchRef.current) {
+          touchScrolledRef.current = true;
+        }
       }
     }),
     getOptionProps: ({
       index,
       option
     }) => {
-      const selected = (multiple ? value : [value]).some(value2 => value2 != null && isOptionEqualToValue(option, value2));
+      const selected = isOptionSelected(option);
       const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
       return {
         key: getOptionKey?.(option) ?? getOptionLabel(option),
@@ -1040,8 +1237,6 @@ function useAutocomplete(props) {
     anchorEl,
     setAnchorEl,
     focusedItem,
-    // deprecated
-    focusedTag: focusedItem,
     groupedOptions
   };
 }