[Select][base-ui] Removes highlighted class on item deselection

[sai6855]

closes: #38789

This PR fixes 2 issues described below.

steps to reproduce

Issue 1

before:

1. open https://mui.com/base-ui/react-select/#multi-select
2. click on select
3. deselect 20 and move mouse away.
4. option is still highlighted

after:

1. open https://deploy-preview-38790--material-ui.netlify.app/base-ui/react-select/#multi-select
2. click on select
3. deselect 20 and move mouse away.
4. option is not highlighted

Issue 2

before:

1. open https://mui.com/base-ui/react-select/#multi-select
2. click on select
3. hover mouse on 30 option
4. click space button
5. observe ten option is deselected where infact 30 should be selected.
   (benchmark for this behaviour: https://ariakit.org/examples/select-multiple )

after:

1. open https://deploy-preview-38790--material-ui.netlify.app/base-ui/react-select/#multi-select
2. click on select
3. hover mouse on 30 option
4. click space button
5. 30 is selected.

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-38790--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against ef4a51d

[sai6855]

since itemIndex is calculated by taking itemComparer into consideration, i reused itemIndex here.

[michaldudak]

IMO the UX is worse now. When I use the keyboard to deselect an option, I don't want the highlight to be reset, but to stay on the option I just deselected so I can move to other options.

[sai6855]

IMO the UX is worse now. When I use the keyboard to deselect an option, I don't want the highlight to be reset, but to stay on the option I just deselected so I can move to other options.

Got it. What about highlighting reset only when user clicks on option? If user deselects through keyboard option will stay highlighted

[sai6855]

@michaldudak what do you think about current UX. I've fixed UX issue you described, additionally other issue also got fixed automatically (you can find this in PR description)

[michaldudak]

What about highlighting reset only when user clicks on option? If user deselects through keyboard option will stay highlighted

I'm not convinced it's the right approach. Since I interacted with a given option, it makes sense to be focused (= highlighted).

As for issue 2, it's a controversial topic. IMO keyboard and mouse highlights should be separate (= the current behavior). We could make it more apparent by changing the option hover style so it's different from the highlighted state.