[Autocomplete] option gets selected when clicking outside of the option list when autoSelect=true and freeSolo=true

[PetrStoklas]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

property autoSelect is set to true
property freeSolo is set to true

list with options "suggestions" is open

I hover over some of those option with cursor

I then move cursor out of the options list and click

option gets selected as a value of the field

Expected behavior 🤔

property autoSelect is set to true
property freeSolo is set to true

list with options "suggestions" is open

I hover over some of those option with cursor

I then move cursor out of the options list and click

options list gets closed no value change happens

Steps to reproduce 🕹

Steps:

1. Use Autocomplete field with freeSolo and autoSelect props to true.
2. Type something in so the list with suggestions opens.
3. Hover over some of those options by cursor.
4. Click away from the options list and the options gets selected.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

System:
    OS: macOS 12.4
  Binaries:
    Node: 17.3.1 - ~/.nvm/versions/node/v17.3.1/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 8.3.0 - ~/.nvm/versions/node/v17.3.1/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Edge: Not Found
    Firefox: 92.0.1
    Safari: 15.5
  npmPackages:
    @emotion/react: ^11.9.3 => 11.9.3 
    @emotion/styled: ^11.9.3 => 11.9.3 
    @mui/base:  5.0.0-alpha.88 
    @mui/icons-material: ^5.8.4 => 5.8.4 
    @mui/lab: ^5.0.0-alpha.83 => 5.0.0-alpha.83 
    @mui/material: ^5.8.3 => 5.8.7 
    @mui/private-theming:  5.8.6 
    @mui/styled-engine:  5.8.7 
    @mui/styled-engine-sc: ^5.8.0 => 5.8.0 
    @mui/system:  5.8.7 
    @mui/types:  7.1.4 
    @mui/utils:  5.8.6 
    @mui/x-data-grid: ^5.12.3 => 5.13.1 
    @mui/x-date-pickers:  5.0.0-alpha.1 
    @types/react: ^17.0.39 => 17.0.45 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components: ^5.3.5 => 5.3.5 
    typescript: ^4.6.2 => 4.7.3 

[PunitSoniME]

@PetrStoklas

autoSelect prop is used to select the option which gets mouse hover or keyboard focus

If your <Select /> contains autoSelect both, it will auto select the hovered or focused option

[PetrStoklas]

@PunitSoniME

Yes, but I would expect the option to stop being hovered when the cursor leaves the options list. I think when user wants to click outside of the options list it means he wants to close the options and pick none.

[PunitSoniME]

@PetrStoklas

Then you can remove autoSelect prop to disable that functionality.

Or do you want to keep autoSelect and wants to disable that hover functionality ?

[PetrStoklas]

@PunitSoniME

But I find the autoSelect functionality useful in a way where user types something in the input field and the text matches value. Lets say picking from list of U.S. states. Lets say I do not want to scroll down to WY for Wyoming but just type it in quickly, hit tab and go.

Yes I would love to loose the hover when not directly hovering over the option.

Is there a way how to do it with the current version?

[ZeeshanTamboli]

Duplicate of #20602