useAutocomplete highlight is not working correctly when options are already selected

[vmichailidisdev]

Steps to reproduce

Steps:

1. Open this link to live example: useAutocomplete highlight problem example.
2. Follow the descriptions below for each issue.
3. You may need to refresh the stackblitz inner iframe when the dependencies are loaded.

Current behavior

• when multiple option is enabled:
  • when autoHighlight is disabled:
    • when we use value or defaultValue (have some options selected by default)
      • Issue 1:
        1. focus the input.
        2. use the arrow down button.
           Notice that the highlight starts below the last selected option.
      • Issue 2:
        1. focus the input.
        2. press Enter.
           Notice that the last selected value is unselected.
  • when autoHighlight is enabled:
    • when we use value or defaultValue (have some options selected by default)
      1. focus the input
         Notice that the highlighted option in the last selected option.

Expected behavior

• when multiple option is enabled:
  • when autoHighlight is disabled:
    • when we use value or defaultValue (have some options selected by default)
      • Issue 1:
        1. focus the input.
        2. use the arrow down button.
           The highlight should start from the first option (index 0).
      • Issue 2:
        1. focus the input.
        2. press Enter.
           Enter should do nothing (noop) because nothing should be highlighted in that moment.
  • when autoHighlight is enabled:
    • when we use value or defaultValue (have some options selected by default)
      1. focus the input
         The highlighted should be the first option (index 0).

Context

I am trying to build a very complex component using useAutocomplete that is out of context of this issue. I am demonstrating the issue with the example of the useAutocomplete from mui documentation https://mui.com/material-ui/react-autocomplete/#customized-hook.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: useAutocomplete, autocomplete, highlight

Search keywords:

[mj12albert]

Transferring this issue as useAutocomplete is part of Material UI now, and not part of the (legacy) @mui/base

[mj12albert]

@vmichailidisdev Considering the combobox pattern:

Down Arrow: If the popup is available, moves focus into the popup:
If the autocomplete behavior automatically selected a suggestion before Down Arrow was pressed, focus is placed on the suggestion following the automatically selected suggestion.

I think it's the expected behavior that when an option is already selected, and when the popup is opened with ArrowDown, focus starts on the option after the selected one

[mj12albert]

Closing this issue as expected behavior for now!

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@vmichailidisdev How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.