Skip to content

[Select][base] Fix flicker on click of controlled Select button#37855

Merged
mnajdova merged 6 commits intomui:masterfrom
VishruthR:controlled-select-click-flicker
Aug 7, 2023
Merged

[Select][base] Fix flicker on click of controlled Select button#37855
mnajdova merged 6 commits intomui:masterfrom
VishruthR:controlled-select-click-flicker

Conversation

@VishruthR
Copy link
Copy Markdown
Contributor

@VishruthR VishruthR commented Jul 7, 2023

The cause of the issue was that the state of the Select component was only updated onClick. However, the highlighting of the button was based on onMouseDown and onMouseUp. Since onMouseUp is triggered before onClick, there was a moment of time between the onMouseUp and onClick events which created the flicker. I solved this by updating the state of the component during the onMouseDown event. This does slightly change the functionality of the component, I'm not sure if this is an ok change or not, please lmk!

Closes #37673

Recording 2023-07-06 at 19 08 22

@mui-bot
Copy link
Copy Markdown

mui-bot commented Jul 7, 2023

Netlify deploy preview

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

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 0ab11b5

@VishruthR VishruthR marked this pull request as ready for review July 9, 2023 03:11
@oliviertassinari oliviertassinari added scope: select Changes related to the select. package: @mui/base Specific to @mui/base (legacy). labels Jul 9, 2023
@zannager zannager requested a review from michaldudak July 10, 2023 06:06
@VishruthR
Copy link
Copy Markdown
Contributor Author

Hi @michaldudak , just wanted to check in and see if you've gotten a chance to take a look at this PR yet?

Copy link
Copy Markdown
Member

@michaldudak michaldudak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for investigating and fixing this. Your fix actually brings it closer in functionality to native <select>, so 👍

@michaldudak michaldudak changed the title [Select][Base] Fix flicker on click of controlled Select button [Select][base] Fix flicker on click of controlled Select button Jul 19, 2023
@VishruthR VishruthR requested a review from michaldudak July 19, 2023 23:48
Copy link
Copy Markdown
Member

@michaldudak michaldudak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Thank you for working on this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: @mui/base Specific to @mui/base (legacy). scope: select Changes related to the select.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Select][base] In controlled mode, the button flashes when clicked

5 participants