Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed

Conversation

joeheyming
Copy link

@joeheyming joeheyming commented Oct 15, 2023

What is the problem 🤔

  • The last hovered item remains selected when your mouse leaves the Autocomplete Popover.

What are we fixing 🔧

  • We are adding a minor onMouseLeave event to each option. When you leave the option, it will remove any selection by selecting the -1 index.

  • We also added a prop: keepSelectedOnLeave if people still want this functionality. But we default to not having this functionality.

I'm open to preserving backward compatibility, but it makes sense from reading the GitHub issues that it would be preferred as not default behavior.

Note: It might be better, performance-wise, to add a top-level mousemove and mouseleave event instead of a mousemove/mouseleave event per option. That way, we wouldn't have to install so many event listeners.

Screen.Recording.2023-10-15.at.11.21.20.AM.mov

@joeheyming
Copy link
Author

#23916

@mui-bot
Copy link

mui-bot commented Oct 15, 2023

Netlify deploy preview

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

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 37ab2f5

@zannager zannager added the component: autocomplete This is the name of the generic UI component, not the React module! label Oct 16, 2023
What is the problem:
- Currently, when your mouse leaves the Autocomplete Popover, the last
hovered item is selected.

What are we fixing:
- We are adding a minor onMouseLeave event to each option. When you
leave the option, it will remove any selection by selecting the -1
index.

- We also added a prop: keepSelectedOnLeave if people still want this
functionality. But we default to not having this functionality.

I'm open to preserving backward compatibility, but it seems to make
sense from reading the GitHub issues that it would be preferred as not
default behavior.

Note: It might be better performance wise, to add a toplevel mousemove
and mouseleave event instead of a mousemove/mouseleave event per
option. That way we wouldn't have to install so many event listeners.
@joeheyming
Copy link
Author

I'm doing this for #hacktoberfest

@michaldudak
Copy link
Member

We are adding a minor onMouseLeave event to each option. When you leave the option, it will remove any selection by selecting the -1 index.

This doesn't work well when you try to scroll through the list - the scroll position is continuously reset.

I'm open to preserving backward compatibility, but it makes sense from reading the GitHub issues that it would be preferred as not default behavior.

We can't introduce breaking changes between major versions. The solution must be backward-compatible.

@michaldudak michaldudak added PR: needs revision The pull request can't be merged. More details is available on the code review or fails in the CI enhancement This is not a bug, nor a new feature labels Oct 25, 2023
@ZeeshanTamboli
Copy link
Member

Since this PR is inactive and hasn't addressed the above comment, I am closing it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: autocomplete This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature PR: needs revision The pull request can't be merged. More details is available on the code review or fails in the CI
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants