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

[InputLabel] Fix shrunk label click not focusing input #16215

Closed
wants to merge 3 commits into from

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Jun 13, 2019

Reverts #13040 but should not regress from #12997

Fixes clicking shrunk labels not focusing their associated input: https://deploy-preview-16215--material-ui.netlify.com/components/text-fields/#outlined

I think the issue with #12997 was that the label was not associated with the input. pointer-events: none fixed the apparent issue but hides a deeper issue with the a11y of the text field.

We should optimize for proper a11y setups in which a click on a shrunk label would not focus the text field. Depending on the layout pointer-events: none could prevent the default label-input UX.

Would like some feedback about the new cursor logic. I'd be fine without cursor: text trickery. Problem without cursor: text the cursor behaves different on outlined vs standard text fields. But with it you get a short flash when clicking on shrunk labels.

TODO:

  • Need to figure out hover styles.

@eps1lon eps1lon added accessibility a11y component: text field This is the name of the generic UI component, not the React module! labels Jun 13, 2019
@mui-pr-bot
Copy link

mui-pr-bot commented Jun 13, 2019

Details of bundle changes.

Comparing: 4a3297d...53777a6

bundle parsed diff gzip diff prev parsed current parsed prev gzip current gzip
@material-ui/core -0.00% +0.03% 🔺 318,911 318,907 87,557 87,585
@material-ui/core/Paper 0.00% 0.00% 68,281 68,281 20,353 20,353
@material-ui/core/Paper.esm 0.00% 0.00% 61,578 61,578 19,133 19,133
@material-ui/core/Popper 0.00% 0.00% 28,968 28,968 10,411 10,411
@material-ui/core/Textarea 0.00% 0.00% 5,513 5,513 2,374 2,374
@material-ui/core/TrapFocus 0.00% 0.00% 3,755 3,755 1,580 1,580
@material-ui/core/styles/createMuiTheme 0.00% 0.00% 16,012 16,012 5,791 5,791
@material-ui/core/useMediaQuery 0.00% 0.00% 2,597 2,597 1,102 1,102
@material-ui/lab 0.00% 0.00% 140,480 140,480 43,417 43,417
@material-ui/styles 0.00% 0.00% 51,703 51,703 15,337 15,337
@material-ui/system 0.00% 0.00% 15,266 15,266 4,333 4,333
Button 0.00% 0.00% 84,273 84,273 25,630 25,630
Modal 0.00% 0.00% 20,345 20,345 6,689 6,689
Slider 0.00% 0.00% 74,587 74,587 23,184 23,184
colorManipulator 0.00% 0.00% 3,904 3,904 1,544 1,544
docs.landing 0.00% 0.00% 55,232 55,232 13,946 13,946
docs.main +0.01% 🔺 +0.02% 🔺 650,961 651,017 205,016 205,048
packages/material-ui/build/umd/material-ui.production.min.js -0.00% +0.02% 🔺 292,168 292,164 83,484 83,499

Generated by 🚫 dangerJS against 53777a6

@eps1lon eps1lon force-pushed the fix/TextField/label-focus-input branch from 7be2440 to 53777a6 Compare June 14, 2019 08:44
@eps1lon
Copy link
Member Author

eps1lon commented Jun 14, 2019

Google uses the same tradeoff (z-index + pointer-events: none) when logging into gmail. I guess this is fine to loose some clickable pixels.

The autofill background color hack might be useful when we tackle #14427

@eps1lon eps1lon closed this Jun 14, 2019
@eps1lon eps1lon deleted the fix/TextField/label-focus-input branch June 14, 2019 08:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility a11y component: text field This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants