[material-ui][Autocomplete] Unselect options when mouse leaves.

docs/pages/material-ui/api/autocomplete.json

@@ -84,6 +84,7 @@
  "describedArgs": ["option", "value"]
  }
  },
+ "keepSelectedOnLeave": { "type": { "name": "bool" }, "default": "false" },
  "limitTags": { "type": { "name": "custom", "description": "integer" }, "default": "-1" },
  "ListboxComponent": { "type": { "name": "elementType" }, "default": "'ul'" },
  "ListboxProps": { "type": { "name": "object" } },

docs/translations/api-docs/autocomplete/autocomplete.json

@@ -94,6 +94,9 @@
  "description": "Used to determine if the option represents the given value. Uses strict equality by default. ⚠️ Both arguments need to be handled, an option can only match with one value.",
  "typeDescriptions": { "option": "The option to test.", "value": "The value to test against." }
  },
+ "keepSelectedOnLeave": {
+ "description": "By default, options are selected on hover and deselected when unhovered. When keepSelectedOnLeave is <code>true</code>, we preserve the last selected option if the mouse leaves the Autocomplete popover."
+ },
  "limitTags": {
  "description": "The maximum number of tags that will be visible when not focused. Set <code>-1</code> to disable the limit."
  },

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

@@ -105,6 +105,7 @@ export function useAutocomplete(props) {
  includeInputInList = false,
  inputValue: inputValueProp,
  isOptionEqualToValue = (option, value) => option === value,
+ keepSelectedOnLeave = false,
  multiple = false,
  onChange,
  onClose,
@@ -975,6 +976,18 @@ export function useAutocomplete(props) {
  }
  };
 
+ const handleOptionMouseLeave = (event) => {
+ if (keepSelectedOnLeave) {
+ return;
+ }
+ const index = -1;
+ setHighlightedIndex({
+ event,
+ index,
+ reason: 'mouse',
+ });
+ };
+
  const handleOptionMouseMove = (event) => {
  const index = Number(event.currentTarget.getAttribute('data-option-index'));
  if (highlightedIndexRef.current !== index) {
@@ -1170,6 +1183,7 @@ export function useAutocomplete(props) {
  onMouseMove: handleOptionMouseMove,
  onClick: handleOptionClick,
  onTouchStart: handleOptionTouchStart,
+ onMouseLeave: handleOptionMouseLeave,
  'data-option-index': index,
  'aria-disabled': disabled,
  'aria-selected': selected,

packages/mui-material/src/Autocomplete/Autocomplete.d.ts

@@ -182,6 +182,13 @@ export interface AutocompleteProps<
  * @default 'Loading…'
  */
  loadingText?: React.ReactNode;
+ /**
+ * By default, options are selected on hover and deselected when unhovered.
+ * When keepSelectedOnLeave is `true`, we preserve the last selected option
+ * if the mouse leaves the Autocomplete popover.
+ * @default false
+ */
+ keepSelectedOnLeave?: boolean;
  /**
  * The maximum number of tags that will be visible when not focused.
  * Set `-1` to disable the limit.

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

@@ -418,6 +418,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
  id: idProp,
  includeInputInList = false,
  inputValue: inputValueProp,
+ keepSelectedOnLeave = false,
  limitTags = -1,
  ListboxComponent = 'ul',
  ListboxProps,
@@ -936,6 +937,13 @@ Autocomplete.propTypes /* remove-proptypes */ = {
  * @returns {boolean}
  */
  isOptionEqualToValue: PropTypes.func,
+ /**
+ * By default, options are selected on hover and deselected when unhovered.
+ * When keepSelectedOnLeave is `true`, we preserve the last selected option
+ * if the mouse leaves the Autocomplete popover.
+ * @default false
+ */
+ keepSelectedOnLeave: PropTypes.bool,
  /**
  * The maximum number of tags that will be visible when not focused.
  * Set `-1` to disable the limit.

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

@@ -2702,6 +2702,13 @@ describe('<Autocomplete />', () => {
  expect(handleHighlightChange.lastCall.args[0]).not.to.equal(undefined);
  expect(handleHighlightChange.lastCall.args[1]).to.equal(options[0]);
  expect(handleHighlightChange.lastCall.args[2]).to.equal('mouse');
+
+ // when leaving the option, we want to unhighlight the last selected option.
+ fireEvent.mouseLeave(firstOption);
+
+ expect(handleHighlightChange.lastCall.args[0]).not.to.equal(undefined);
+ expect(handleHighlightChange.lastCall.args[1]).to.equal(null);
+ expect(handleHighlightChange.lastCall.args[2]).to.equal('mouse');
  });
 
  it('should pass to onHighlightChange the correct value after filtering', () => {