search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.81k stars 32.25k forks source link

[Pagination] clicking on disabled arrows autoselects unrelated things #23589

Open socketpair opened 3 years ago

socketpair commented 3 years ago

https://material-ui.com/ru/components/pagination/

Fast clicking on > on first line in screenshot autoselects ... on next line:

image

socketpair commented 3 years ago

I think, it because disabled elements do not intercept click / double click

eps1lon commented 3 years ago

I think, it because disabled elements do not intercept click / double click

Correct, but only Material-UI Button. We're setting pointer-event: none on disabled buttons. But it looks like we no longer need it and can adjust some CSS (see #23101 for progress). This is preferable over overwriting platform behavior since disabling pointer-event has some unforeseen consequences such as this issue.

oliviertassinari commented 3 years ago

@eps1lon Is the following summary correct, pointer-event: none is only required in two cases:

I think that the Pagination component should primarily be used with a link, <a>. We need to swallow the onClick event, but what about the other events, won't they need a pointer-event: none style? Maybe the current behavior is the downside of these constraints, something we have no freedom to fix (other tradeoffs making things, worse, overall)? Not sure, I guess it needs further exploration to know 🤔 .

eps1lon commented 3 years ago

Is the following summary correct, pointer-event: none is only required in two cases

It's never required for interactive elements. As far as I can tell it was only used as a shortcut without being aware of all the unintended side-effects. These are minute nuances that are hard to miss but since we're now aware of all the problems pointer-events: none causes we can get rid of it.

socketpair commented 2 years ago

Still reproduced... https://mui.com/material-ui/react-pagination/