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

[TextField] Add focused prop #20276

Merged

Conversation

dmtrKovalenko
Copy link
Member

As discussed with @oliviertassinari this needs for date range picker to display currently selectable range end, according to material design guideline. And this prop is also can be useful for public users.

@eps1lon
Copy link
Member

eps1lon commented Mar 25, 2020

Could you explain the use case a bit more? Trapping focus needs a really strong argument since it violates WCAG guidelines. It's not even focus trapping in the classical sense (see Modals).

@mui-pr-bot
Copy link

mui-pr-bot commented Mar 25, 2020

Details of bundle changes.

Comparing: e9fbcbf...b43f0d5

Details of page changes
bundle Size Change Size Gzip Change Gzip
/components/radio-buttons ▲ +100 B (+0.66% ) 15.3 kB -- -1 B
/api-docs/form-control ▲ +20 B (+0.95% ) 2.12 kB -- -1 B
/api-docs/avatar ▼ -10 B (-0.62% ) 1.6 kB -- -1 B
/api-docs/button ▲ +10 B (+0.43% ) 2.33 kB -- -1 B
/api-docs/input-label ▲ +10 B (+0.55% ) 1.83 kB -- -1 B
/api-docs/table-cell ▼ -10 B (-0.53% ) 1.86 kB -- -1 B
/api-docs/tree-view ▼ -10 B (-0.60% ) 1.66 kB -- -1 B
/performance/table-emotion ▲ +10 B (+0.34% ) 2.97 kB -- -1 B
/system/display ▼ -10 B (-0.15% ) 6.5 kB -- -1 B
/api-docs/svg-icon ▼ -10 B (-0.50% ) 2 kB -- -1 B
/_app -- 34.4 kB -- -1 B
/api-docs/alert-title -- 1.14 kB -- -1 B
/api-docs/alert -- 2.15 kB -- -1 B
/api-docs/app-bar -- 1.69 kB -- -1 B
/api-docs/autocomplete -- 4.05 kB -- -1 B
/api-docs/avatar-group -- 1.26 kB -- -1 B
/api-docs/backdrop -- 1.38 kB -- -1 B
/api-docs/badge -- 1.88 kB -- -1 B
/api-docs/bottom-navigation-action -- 1.55 kB -- -1 B
/api-docs/bottom-navigation -- 1.43 kB -- -1 B
/api-docs/breadcrumbs -- 1.59 kB -- -1 B
/api-docs/button-base -- 2.08 kB -- -1 B
/api-docs/button-group -- 1.95 kB -- -1 B
/api-docs/card-action-area -- 1.32 kB -- -1 B
/api-docs/card-actions -- 1.22 kB -- -1 B
/api-docs/card-content -- 1.2 kB -- -1 B
/api-docs/card-header -- 1.53 kB -- -1 B
/api-docs/card-media -- 1.43 kB -- -1 B
/api-docs/card -- 1.25 kB -- -1 B
/api-docs/checkbox -- 2.05 kB -- -1 B
/api-docs/chip -- 2.19 kB -- -1 B
/api-docs/circular-progress -- 1.8 kB -- -1 B
/api-docs/click-away-listener -- 1.13 kB -- -1 B
/api-docs/collapse -- 1.76 kB -- -1 B
/api-docs/container -- 1.62 kB -- -1 B
/api-docs/css-baseline -- 1.14 kB -- -1 B
/api-docs/dialog-actions -- 1.22 kB -- -1 B
/api-docs/dialog-content-text -- 1.23 kB -- -1 B
/api-docs/dialog-content -- 1.2 kB -- -1 B
/api-docs/dialog-title -- 1.25 kB -- -1 B
/api-docs/dialog -- 2.48 kB -- -1 B
/api-docs/divider -- 1.55 kB -- -1 B
/api-docs/drawer -- 1.87 kB -- -1 B
/api-docs/expansion-panel-actions -- 1.23 kB -- -1 B
/api-docs/expansion-panel-details -- 1.16 kB -- -1 B
/api-docs/expansion-panel-summary -- 1.46 kB -- -1 B
/api-docs/expansion-panel -- 1.7 kB -- -1 B
/api-docs/fab -- 1.86 kB -- -1 B
/api-docs/fade -- 1.17 kB -- -1 B
/api-docs/filled-input -- 2.65 kB -- -1 B
/api-docs/form-control-label -- 1.73 kB -- -1 B
/api-docs/form-group -- 1.3 kB -- -1 B
/api-docs/form-helper-text -- 1.66 kB -- -1 B
/api-docs/form-label -- 1.59 kB -- -1 B
/api-docs/grid-list-tile-bar -- 1.54 kB -- -1 B
/api-docs/grid-list-tile -- 1.46 kB -- -1 B
/api-docs/grid-list -- 1.37 kB -- -1 B
/api-docs/grid -- 2.29 kB -- -1 B
/api-docs/grow -- 1.23 kB -- -1 B
/api-docs/hidden -- 1.32 kB -- -1 B
/api-docs/icon-button -- 1.85 kB -- -1 B
/api-docs/icon -- 1.54 kB -- -1 B
/api-docs/input-adornment -- 1.68 kB -- -1 B
/api-docs/input-base -- 2.74 kB -- -1 B
/api-docs/input -- 2.61 kB -- -1 B
/api-docs/linear-progress -- 1.78 kB -- -1 B
/api-docs/link -- 1.68 kB -- -1 B
/api-docs/list-item-avatar -- 1.25 kB -- -1 B
/api-docs/list-item-icon -- 1.27 kB -- -1 B
/api-docs/list-item-secondary-action -- 1.22 kB -- -1 B
/api-docs/list-item-text -- 1.54 kB -- -1 B
/api-docs/list-item -- 2 kB -- -1 B
/api-docs/list-subheader -- 1.51 kB -- -1 B
/api-docs/list -- 1.44 kB -- -1 B
/api-docs/menu-item -- 1.46 kB -- -1 B
/api-docs/menu-list -- 1.36 kB -- -1 B
/api-docs/menu -- 2.13 kB -- -1 B
/api-docs/mobile-stepper -- 1.67 kB -- -1 B
/api-docs/modal -- 2.14 kB -- -1 B
/api-docs/native-select -- 1.83 kB -- -1 B
/api-docs/no-ssr -- 1.09 kB -- -1 B
/api-docs/outlined-input -- 2.76 kB -- -1 B
/api-docs/pagination-item -- 1.71 kB -- -1 B
/api-docs/pagination -- 1.98 kB -- -1 B
/api-docs/paper -- 1.61 kB -- -1 B
/api-docs/popover -- 2.5 kB -- -1 B
/api-docs/popper -- 1.76 kB -- -1 B
/api-docs/portal -- 1.12 kB -- -1 B
/api-docs/radio-group -- 1.23 kB -- -1 B
/api-docs/radio -- 1.87 kB -- -1 B
/api-docs/rating -- 2.25 kB -- -1 B
/api-docs/root-ref -- 1.2 kB -- -1 B
/api-docs/scoped-css-baseline -- 1.15 kB -- -1 B
/api-docs/select -- 2.65 kB -- -1 B
/api-docs/skeleton -- 1.52 kB -- -1 B
/api-docs/slide -- 1.31 kB -- -1 B
/api-docs/slider -- 2.85 kB -- -1 B
/api-docs/snackbar-content -- 1.36 kB -- -1 B
/api-docs/snackbar -- 2.46 kB -- -1 B
/api-docs/speed-dial-action -- 1.67 kB -- -1 B
/api-docs/speed-dial-icon -- 1.29 kB -- -1 B
/api-docs/speed-dial -- 2.05 kB -- -1 B
/api-docs/step-button -- 1.38 kB -- -1 B
/api-docs/step-connector -- 1.29 kB -- -1 B
/api-docs/step-content -- 1.47 kB -- -1 B
/api-docs/step-icon -- 1.33 kB -- -1 B
/api-docs/step-label -- 1.64 kB -- -1 B
/api-docs/step -- 1.38 kB -- -1 B
/api-docs/stepper -- 1.6 kB -- -1 B
/api-docs/swipeable-drawer -- 1.78 kB -- -1 B
/api-docs/switch -- 2.22 kB -- -1 B
/api-docs/tab -- 1.74 kB -- -1 B
/api-docs/table-body -- 1.21 kB -- -1 B
/api-docs/table-container -- 1.22 kB -- -1 B
/api-docs/table-footer -- 1.22 kB -- -1 B
/api-docs/table-head -- 1.21 kB -- -1 B
/api-docs/table-pagination -- 2.21 kB -- -1 B
/api-docs/table-row -- 1.43 kB -- -1 B
/api-docs/table-sort-label -- 1.57 kB -- -1 B
/api-docs/table -- 1.43 kB -- -1 B
/api-docs/tabs -- 2.28 kB -- -1 B
/api-docs/text-field -- 2.94 kB -- -1 B
/api-docs/textarea-autosize -- 908 B -- -1 B
/api-docs/toggle-button-group -- 1.56 kB -- -1 B
/api-docs/toggle-button -- 1.55 kB -- -1 B
/api-docs/toolbar -- 1.4 kB -- -1 B
/api-docs/tooltip -- 2.3 kB -- -1 B
/api-docs/tree-item -- 1.53 kB -- -1 B
/api-docs/typography -- 2.33 kB -- -1 B
/api-docs/zoom -- 1.2 kB -- -1 B
/blog/2019-developer-survey-results -- 5.97 kB -- -1 B
/blog/2019 -- 3.86 kB -- -1 B
/blog/april-2019-update -- 2.75 kB -- -1 B
/blog/august-2019-update -- 1.86 kB -- -1 B
/blog/december-2019-update -- 2 kB -- -1 B
/blog/july-2019-update -- 1.75 kB -- -1 B
/blog/june-2019-update -- 1.62 kB -- -1 B
/blog/march-2019-update -- 2.15 kB -- -1 B
/blog/material-ui-v1-is-out -- 6.28 kB -- -1 B
/blog/material-ui-v4-is-out -- 9.31 kB -- -1 B
/blog/may-2019-update -- 1.95 kB -- -1 B
/blog/november-2019-update -- 2.36 kB -- -1 B
/blog/october-2019-update -- 2.1 kB -- -1 B
/blog/september-2019-update -- 2.29 kB -- -1 B
/company/about -- 1.56 kB -- -1 B
/company/contact -- 1.14 kB -- -1 B
/company/jobs -- 1.16 kB -- -1 B
/components/about-the-lab -- 5.55 kB -- -1 B
/components/alert -- 12.5 kB -- -1 B
/components/app-bar -- 30.9 kB -- -1 B
/components/autocomplete -- 111 kB -- -1 B
/components/avatars -- 8.53 kB -- -1 B
/components/backdrop -- 3.2 kB -- -1 B
/components/badges -- 15.1 kB -- -1 B
/components/bottom-navigation -- 6.22 kB -- -1 B
/components/box -- 7.96 kB -- -1 B
/components/breadcrumbs -- 14.3 kB -- -1 B
/components/button-group -- 6.65 kB -- -1 B
/components/buttons -- 24.3 kB -- -1 B
/components/cards -- 16.9 kB -- -1 B
/components/checkboxes -- 16.6 kB -- -1 B
/components/chips -- 21.5 kB -- -1 B
/components/click-away-listener -- 3.38 kB -- -1 B
/components/container -- 3.84 kB -- -1 B
/components/css-baseline -- 5.96 kB -- -1 B
/components/dialogs -- 42.1 kB -- -1 B
/components/dividers -- 12.3 kB -- -1 B
/components/drawers -- 29.3 kB -- -1 B
/components/expansion-panels -- 20.1 kB -- -1 B
/components/floating-action-button -- 10.2 kB -- -1 B
/components/grid-list -- 11.8 kB -- -1 B
/components/grid -- 33.9 kB -- -1 B
/components/hidden -- 10.5 kB -- -1 B
/components/icons -- 23 kB -- -1 B
/components/links -- 6.82 kB -- -1 B
/components/lists -- 33 kB -- -1 B
/components/material-icons -- 728 kB -- -1 B
/components/menus -- 23.2 kB -- -1 B
/components/modal -- 11.5 kB -- -1 B
/components/no-ssr -- 5.02 kB -- -1 B
/components/pagination -- 8.15 kB -- -1 B
/components/paper -- 3.33 kB -- -1 B
/components/pickers -- 38.2 kB -- -1 B
/components/popover -- 14.6 kB -- -1 B
/components/popper -- 22.5 kB -- -1 B
/components/portal -- 3.29 kB -- -1 B
/components/progress -- 21.7 kB -- -1 B
/components/rating -- 10.7 kB -- -1 B
/components/selects -- 28.8 kB -- -1 B
/components/skeleton -- 10.1 kB -- -1 B
/components/slider -- 14.6 kB -- -1 B
/components/snackbars -- 24.9 kB -- -1 B
/components/speed-dial -- 14.6 kB -- -1 B
/components/steppers -- 35.9 kB -- -1 B
/components/switches -- 16 kB -- -1 B
/components/tables -- 177 kB -- -1 B
/components/tabs -- 19.2 kB -- -1 B
/components/text-fields -- 54.7 kB -- -1 B
/components/textarea-autosize -- 2.81 kB -- -1 B
/components/toggle-button -- 10.5 kB -- -1 B
/components/tooltips -- 17.3 kB -- -1 B
/components/transfer-list -- 9.28 kB -- -1 B
/components/transitions -- 10.8 kB -- -1 B
/components/tree-view -- 11.2 kB -- -1 B
/components/typography -- 9.7 kB -- -1 B
/components/use-media-query -- 13.1 kB -- -1 B
/customization/breakpoints -- 15.7 kB -- -1 B
/customization/color -- 21.6 kB -- -1 B
/customization/components -- 37.4 kB -- -1 B
/customization/default-theme -- 8.48 kB -- -1 B
/customization/density -- 9.14 kB -- -1 B
/customization/globals -- 4.65 kB -- -1 B
/customization/palette -- 11.9 kB -- -1 B
/customization/spacing -- 2.49 kB -- -1 B
/customization/theming -- 17.1 kB -- -1 B
/customization/typography -- 11.6 kB -- -1 B
/customization/z-index -- 3.05 kB -- -1 B
/discover-more/backers -- 2.89 kB -- -1 B
/discover-more/changelog -- 1.37 kB -- -1 B
/discover-more/languages -- 3.32 kB -- -1 B
/discover-more/related-projects -- 6.72 kB -- -1 B
/discover-more/roadmap -- 3.67 kB -- -1 B
/discover-more/showcase -- 13.5 kB -- -1 B
/discover-more/team -- 6.51 kB -- -1 B
/discover-more/vision -- 7.03 kB -- -1 B
/getting-started/example-projects -- 6.08 kB -- -1 B
/getting-started/faq -- 31.8 kB -- -1 B
/getting-started/installation -- 7.6 kB -- -1 B
/getting-started/learn -- 8.39 kB -- -1 B
/getting-started/support -- 7.83 kB -- -1 B
/getting-started/supported-components -- 6.19 kB -- -1 B
/getting-started/supported-platforms -- 5.69 kB -- -1 B
/getting-started/templates -- 8.3 kB -- -1 B
/getting-started/templates/album -- 5.65 kB -- -1 B
/getting-started/templates/blog -- 7.43 kB -- -1 B
/getting-started/templates/checkout -- 11.2 kB -- -1 B
/getting-started/templates/dashboard -- 8.54 kB -- -1 B
/getting-started/templates/pricing -- 7.86 kB -- -1 B
/getting-started/templates/sign-in-side -- 9.31 kB -- -1 B
/getting-started/templates/sign-in -- 9.54 kB -- -1 B
/getting-started/templates/sign-up -- 9.65 kB -- -1 B
/getting-started/templates/sticky-footer -- 1.54 kB -- -1 B
/getting-started/usage -- 9.37 kB -- -1 B
/guides/api -- 17.4 kB -- -1 B
/guides/composition -- 14 kB -- -1 B
/guides/flow -- 2.21 kB -- -1 B
/guides/interoperability -- 14.9 kB -- -1 B
/guides/localization -- 19.9 kB -- -1 B
/guides/migration-v0x -- 7.23 kB -- -1 B
/guides/migration-v3 -- 22.3 kB -- -1 B
/guides/minimizing-bundle-size -- 6.74 kB -- -1 B
/guides/responsive-ui -- 4.18 kB -- -1 B
/guides/right-to-left -- 6.7 kB -- -1 B
/guides/server-rendering -- 8.38 kB -- -1 B
/guides/testing -- 8.33 kB -- -1 B
/guides/typescript -- 13.4 kB -- -1 B
/performance/table-component -- 1.44 kB -- -1 B
/performance/table-hook -- 2.23 kB -- -1 B
/performance/table-mui -- 4.42 kB -- -1 B
/performance/table-raw -- 613 B -- -1 B
/performance/table-styled-components -- 2.61 kB -- -1 B
/premium-themes/onepirate -- 7.11 kB -- -1 B
/premium-themes/onepirate/forgot-password -- 1.01 kB -- -1 B
/premium-themes/onepirate/privacy -- 4.44 kB -- -1 B
/premium-themes/onepirate/sign-in -- 1.07 kB -- -1 B
/premium-themes/onepirate/sign-up -- 1.12 kB -- -1 B
/premium-themes/onepirate/terms -- 11.8 kB -- -1 B
/premium-themes/paperbase -- 8.72 kB -- -1 B
/styles/advanced -- 30.2 kB -- -1 B
/styles/api -- 16 kB -- -1 B
/styles/basics -- 17.6 kB -- -1 B
/system/api -- 5.85 kB -- -1 B
/system/basics -- 25.2 kB -- -1 B
/system/borders -- 4.04 kB -- -1 B
/system/flexbox -- 5.72 kB -- -1 B
/system/palette -- 4.28 kB -- -1 B
/system/positions -- 2.46 kB -- -1 B
/system/shadows -- 3.44 kB -- -1 B
/system/sizing -- 3.44 kB -- -1 B
/system/spacing -- 5.97 kB -- -1 B
/system/typography -- 4.22 kB -- -1 B
/versions -- 23.1 kB -- -1 B
docs:chunk:shared -- 68.7 kB -- -1 B
docs:shared:chunk/commons -- 5.99 kB -- -1 B
docs:shared:chunk/framework -- 42.3 kB -- -1 B
docs:shared:runtime/main -- 6.78 kB -- -1 B
docs:shared:runtime/webpack -- 1.24 kB -- -1 B
bundle Size Change Size Gzip Change Gzip
@material-ui/core ▲ +39 B (+0.01% ) 362 kB ▲ +44 B (+0.04% ) 99.7 kB
TextField ▲ +39 B (+0.03% ) 129 kB ▲ +11 B (+0.03% ) 37.9 kB
FormControl ▲ +39 B (+0.06% ) 69 kB ▲ +8 B (+0.04% ) 21.5 kB
@material-ui/core[umd] ▲ +39 B (+0.01% ) 320 kB ▲ +3 B (0.00% ) 92.9 kB
@material-ui/lab -- 203 kB -- 60.5 kB
@material-ui/styles -- 52 kB -- 15.6 kB
@material-ui/system -- 17.2 kB -- 4.52 kB
Alert -- 87.9 kB -- 27.9 kB
AlertTitle -- 68.8 kB -- 21.7 kB
AppBar -- 68.7 kB -- 21.6 kB
Autocomplete -- 136 kB -- 42.9 kB
Avatar -- 69.8 kB -- 21.9 kB
AvatarGroup -- 70.8 kB -- 22.5 kB
Backdrop -- 72.5 kB -- 22.4 kB
Badge -- 70 kB -- 21.8 kB
BottomNavigation -- 67.1 kB -- 21.1 kB
BottomNavigationAction -- 80.1 kB -- 25.4 kB
Box -- 73.6 kB -- 22.4 kB
Breadcrumbs -- 84.9 kB -- 27 kB
Button -- 84.3 kB -- 25.9 kB
ButtonBase -- 78.6 kB -- 24.7 kB
ButtonGroup -- 87.8 kB -- 27.2 kB
Card -- 67.5 kB -- 21.2 kB
CardActionArea -- 79.7 kB -- 25.3 kB
CardActions -- 66.7 kB -- 20.9 kB
CardContent -- 66.6 kB -- 20.9 kB
CardHeader -- 69.7 kB -- 22 kB
CardMedia -- 67 kB -- 21.1 kB
Checkbox -- 86.7 kB -- 27.5 kB
Chip -- 87.2 kB -- 26.8 kB
CircularProgress -- 68.8 kB -- 21.7 kB
ClickAwayListener -- 3.84 kB -- 1.54 kB
Collapse -- 72.7 kB -- 22.5 kB
colorManipulator -- 3.88 kB -- 1.52 kB
Container -- 67.8 kB -- 21.2 kB
CssBaseline -- 66.6 kB -- 21 kB
Dialog -- 87.5 kB -- 27.4 kB
DialogActions -- 66.8 kB -- 20.9 kB
DialogContent -- 66.9 kB -- 21 kB
DialogContentText -- 68.7 kB -- 21.6 kB
DialogTitle -- 68.9 kB -- 21.7 kB
Divider -- 67.3 kB -- 21.2 kB
docs:/ -- 10.8 kB -- -1 B
docs:/_app -- 34.4 kB -- -1 B
Drawer -- 89.2 kB -- 27.2 kB
ExpansionPanel -- 76.2 kB -- 24 kB
ExpansionPanelActions -- 66.7 kB -- 20.9 kB
ExpansionPanelDetails -- 66.6 kB -- 20.9 kB
ExpansionPanelSummary -- 82.7 kB -- 26.3 kB
Fab -- 81.4 kB -- 25.4 kB
Fade -- 28.4 kB -- 9.47 kB
FilledInput -- 78.2 kB -- 24.4 kB
FormControlLabel -- 70.1 kB -- 22.1 kB
FormGroup -- 66.7 kB -- 20.8 kB
FormHelperText -- 68 kB -- 21.2 kB
FormLabel -- 68.1 kB -- 21.2 kB
Grid -- 69.8 kB -- 21.9 kB
GridList -- 67.1 kB -- 21.1 kB
GridListTile -- 68.4 kB -- 21.5 kB
GridListTileBar -- 67.9 kB -- 21.3 kB
Grow -- 29 kB -- 9.68 kB
Hidden -- 70.6 kB -- 22.3 kB
Icon -- 67.5 kB -- 21.2 kB
IconButton -- 80.7 kB -- 25.2 kB
Input -- 77.2 kB -- 24.2 kB
InputAdornment -- 69.7 kB -- 22 kB
InputBase -- 75.3 kB -- 23.7 kB
InputLabel -- 69.9 kB -- 21.6 kB
LinearProgress -- 70 kB -- 21.7 kB
Link -- 71.2 kB -- 22.6 kB
List -- 67 kB -- 20.9 kB
ListItem -- 81.6 kB -- 25.6 kB
ListItemAvatar -- 66.8 kB -- 20.9 kB
ListItemIcon -- 66.8 kB -- 21 kB
ListItemSecondaryAction -- 66.7 kB -- 20.9 kB
ListItemText -- 69.6 kB -- 22 kB
ListSubheader -- 67.4 kB -- 21.2 kB
Menu -- 93.2 kB -- 28.8 kB
MenuItem -- 82.7 kB -- 25.9 kB
MenuList -- 70.7 kB -- 22.1 kB
MobileStepper -- 72.5 kB -- 22.8 kB
Modal -- 14.9 kB -- 5.23 kB
NativeSelect -- 81.5 kB -- 25.9 kB
NoSsr -- 2.18 kB -- 1.03 kB
OutlinedInput -- 79.2 kB -- 24.7 kB
Pagination -- 89 kB -- 27.5 kB
PaginationItem -- 85.4 kB -- 26.4 kB
Paper -- 67 kB -- 20.9 kB
Popover -- 87.6 kB -- 27.2 kB
Popper -- 28.8 kB -- 10.3 kB
Portal -- 2.87 kB -- 1.29 kB
Radio -- 87.7 kB -- 27.8 kB
RadioGroup -- 68.4 kB -- 21.3 kB
Rating -- 75.1 kB -- 24.2 kB
RootRef -- 4.61 kB -- 1.77 kB
ScopedCssBaseline -- 67.5 kB -- 21.2 kB
Select -- 120 kB -- 35.8 kB
Skeleton -- 67.7 kB -- 21.4 kB
Slide -- 30.4 kB -- 10.1 kB
Slider -- 80.4 kB -- 25.7 kB
Snackbar -- 79.9 kB -- 25.1 kB
SnackbarContent -- 68.2 kB -- 21.3 kB
SpeedDial -- 90.8 kB -- 28.8 kB
SpeedDialAction -- 122 kB -- 39 kB
SpeedDialIcon -- 69.2 kB -- 21.8 kB
Step -- 67.3 kB -- 21.2 kB
StepButton -- 86.8 kB -- 27.5 kB
StepConnector -- 67.4 kB -- 21.3 kB
StepContent -- 73.8 kB -- 23.1 kB
StepIcon -- 69.2 kB -- 21.6 kB
StepLabel -- 73.2 kB -- 22.7 kB
Stepper -- 69.5 kB -- 22 kB
styles/createMuiTheme -- 22.2 kB -- 7.69 kB
SvgIcon -- 67.7 kB -- 21.2 kB
SwipeableDrawer -- 96.6 kB -- 30.4 kB
Switch -- 85.9 kB -- 27.1 kB
Tab -- 80.9 kB -- 25.8 kB
Table -- 67.2 kB -- 21.1 kB
TableBody -- 66.8 kB -- 20.9 kB
TableCell -- 68.7 kB -- 21.7 kB
TableContainer -- 66.6 kB -- 20.9 kB
TableFooter -- 66.8 kB -- 20.9 kB
TableHead -- 66.8 kB -- 20.9 kB
TablePagination -- 147 kB -- 43.2 kB
TableRow -- 67.1 kB -- 21.1 kB
TableSortLabel -- 81.9 kB -- 26 kB
Tabs -- 89.9 kB -- 28.8 kB
TextareaAutosize -- 5.19 kB -- 2.17 kB
ToggleButton -- 80.7 kB -- 25.7 kB
ToggleButtonGroup -- 67.9 kB -- 21.4 kB
Toolbar -- 67 kB -- 21.1 kB
Tooltip -- 106 kB -- 33.6 kB
TreeItem -- 79.8 kB -- 25.4 kB
TreeView -- 72.9 kB -- 23 kB
Typography -- 68.3 kB -- 21.4 kB
useAutocomplete -- 15.9 kB -- 5.72 kB
useMediaQuery -- 2.56 kB -- 1.06 kB
Zoom -- 28.4 kB -- 9.59 kB

Generated by 🚫 dangerJS against b43f0d5

@oliviertassinari
Copy link
Member

oliviertassinari commented Mar 25, 2020

@eps1lon The use case is visual only. Here is an example in Google Ads, the input has the focused styled (we are really looking for active) and yet it's the popup that has the DOM focus.

Capture d’écran 2020-03-25 à 20 42 23

The underlying problem is: how do we inform the users if he is editing the start or end date while it's the days in the calendar that have the DOM focus?

@dmtrKovalenko
Copy link
Member Author

We need a visual clue for current day selection. Initial displaying is by focus, but it’s required to not loose focus after clicking next/prev month

@eps1lon
Copy link
Member

eps1lon commented Mar 25, 2020

So you just want to reuse styles? That is a completely different issue that you hack around with this implementation. Could you show me the part in the date picker that needs this styling?

@dmtrKovalenko
Copy link
Member Author

We are moving focus to the input on day change, so aria-label will just works.
We need only not to loose styles after loosing dom focus

@oliviertassinari
Copy link
Member

There is a precedent in the SelectInput component, we shallow the blur event to maintain the focused visual state.

@eps1lon
Copy link
Member

eps1lon commented Mar 25, 2020

import React from "react";
import { FormControl, Input, useFormControl } from "@material-ui/core";

export default function App() {
  return (
    <FormControl>
      <Input />
      <br />
      <Picker />
    </FormControl>
  );
}

function Picker() {
  const { onFocus, onBlur } = useFormControl();

  return (
    <select {...{ onFocus, onBlur }}>
      <option>one</option>
      <option>two</option>
    </select>
  );
}

is that what you're looking for?

@dmtrKovalenko
Copy link
Member Author

dmtrKovalenko commented Mar 25, 2020

@eps1lon No, we have

<TextField1 /> // start date
<TextField2 /> // end date

<Popper> 
  <Picker />
</Popper> 

After focusing TextField1 - <Picker /> is rendered in start selection mode, and we need to be able to keep TextField1 focusing style while user is clicking inside the Picker and after user is choosing start date we are moving to end selection and moving dom focus to TextField2

(basically people with disabilities will not interact with picker, so it is not breaking a11y)

@eps1lon
Copy link
Member

eps1lon commented Mar 25, 2020

  1. you probably want a picker for each field anyway to properly separate state
  2. you can still apply my approach. That is why TextField has this customization story.

The same standard applies for any feature request. Just because one specific use case has an easier time with prop-based composition does not mean it is the right approach or should be moved into the core.

@dmtrKovalenko
Copy link
Member Author

dmtrKovalenko commented Mar 25, 2020

This composition is definitely useful for complex UIs and I am not intent to move pickers from TextField base approach, cause it is the most useful and cheap way for users

P.S. I suppose you still don’t get the use case.

@eps1lon
Copy link
Member

eps1lon commented Mar 25, 2020

So just to summarize:

  1. It is in fact not forcing focus
  2. It tries to reuse focus styles. It would help to share the Material mock that showcases this. Focus acts like a cursor and this prop would basically mean that the cursor would be in two places even though it's still just one.
  3. The form components are really complicated components that functioned perfectly well for years without the need to override focus. That should be a strong indicator that something is off about this use case. Not in a good or bad way but in a way that needs a bit more context than just "I need this prop".
  4. Since we have the technology (codesandbox releases): Could you prepare a deploy that uses this PR? This would help a lot understand the interactions that this prop enables.

@dmtrKovalenko
Copy link
Member Author

OK, trying to summarize this PR intention:

Motivation

In DateRangePicker we need to be able to highlight currently selected end of the range, like saying in material guidelines (direct link to the video)

And it is a pretty popular approach in the other date range solutions, like react-dates. So we need to achieve highlighting of the currently selectable range end. For now, I am doing something like
image

Without this highlight, it will be pretty confusing that selection is moved from start to end (It is possible also by direct click on the input)

Proposed solution

Add new forceFocus or forceFocusAppearance prop that is forcing form control to be displayed in a focused state.

Proposed solution with reimplementing TextField will not work for us, because it can make a lot of underlying breaking changes for props, cause all the props are spreading down to textfield. And it is not a good idea trying to make a custom version of TextField for pickers, that will require to support an API

Proposal with prop solving this problem pretty neat and quick.

Possible workarounds

Left pickers without highlighting current range end with background styling

@eps1lon
Copy link
Member

eps1lon commented Mar 26, 2020

The problem with the name is that it is formulated as an action (like autoFocus). But that isn't what it's doing. It's displaying the field in a focused state. We have existing precedent in the code base for that but none of them use force or action terms.

For a consistent API adding a focused prop to FormControl that overrides the state would work as well. In your case you would do <TextField focused={active === true ? true : undefined} />. The undefined part is important to fall back to state if the range isn't active.

The reason why I always caution against these approach is that we're mixing controlled and uncontrolled mode. Historically we know that these can cause all sorts of issues if used incorrectly. By making this a public prop we do invite incorrect usage.

Without the guidelines I would actually propose a different approach: Don't highlight the textfield but rather the focused date. Otherwise the focus cursor is ambigious. But this is irrelevant. Guidelines have priority in absence of other specs.

And it is not a good idea trying to make a custom version of TextField for pickers, that will require to support an API

I'm not following that part. This seems to imply customizing the TextField is a bad idea in the first place?

@dmtrKovalenko
Copy link
Member Author

dmtrKovalenko commented Mar 26, 2020

About UX of this preview:
When you selecting the end of the range you cannot see the which end you are editing, we do even have range preview feature:
image

But it still confusing case when you are hovering the date before start, while selecting the end
image
(in this case, we should select start again - actually, there are several available strategies for range selection, but this one is using the most)

Related to TextField:
Now we are doing <TextField {...other} /> and extends our types from TextFieldProps interface, in your case we need to rewrite all the TextField props combination manually and support in future with major releases of core

So what?

So what is your proposal? Make focused: true | undefined private prop?
It is not really a nice solution as for me because, as you say we are trying to mix controlled and uncontrolled this way.
If we are trying to control this prop all focus management logic should be on our side.

@dmtrKovalenko
Copy link
Member Author

@eps1lon could you please request any changes you think needs to be done, so I will be able to finish this PR?

@dmtrKovalenko
Copy link
Member Author

Changed name to visuallyFocused

@oliviertassinari
Copy link
Member

oliviertassinari commented Mar 27, 2020

I have tried to benchmark all the Google's date range pickers I could get my hands one.
The focused approach seems to be the same, they style the input with the focused state when interacting with the calendar.

Google Analytics

ga focus input

input focused

ga focus day

calendar focused

Google Flight

flight focus input

input focused

flight focus day

calendar focused

Google Ads

ads focus input

input focused

ads focus day

calendar focused


I think that we can move forward with the proposal of @eps1lon

  1. For a consistent API adding a focused prop to FormControl that overrides the state would work as well. In your case you would do <TextField focused={active === true ? true : undefined} />. The undefined part is important to fall back to state if the range isn't active.

Regarding the mixing of an uncontrolled and controlled state, I think that we can address this later down the road. Right now, there is no obvious problem this will cause. However, if it does, we know how to solve it, there are no blockers I'm aware of that might stuck us in the future.

  1. Changed name to visuallyFocused

@dmtrKovalenko Going with a different name to represent a different state sounds like a viable alternative. Maybe activated or selected would make a great name for the prop?


@oliviertassinari oliviertassinari added component: text field This is the name of the generic UI component, not the React module! new feature New feature or request labels Mar 27, 2020
@oliviertassinari oliviertassinari changed the title [FormControl] Add new forceFocus prop [TextField] Add focus prop Mar 28, 2020
@dmtrKovalenko dmtrKovalenko changed the title [TextField] Add focus prop [TextField] Add focused prop Mar 29, 2020
@oliviertassinari
Copy link
Member

oliviertassinari commented Mar 29, 2020

@dmtrKovalenko While mixing a controlled and uncontrolled behavior with <TextField focused={active === true ? true : undefined} /> is a viable solution, I believe that you could also fully control the state with a focus and blur listener. I might be a better approach to scale with non-Material-UI input elements, for instance, a user might want to use the date range picker with its own version of input. To be considered.

@oliviertassinari oliviertassinari merged commit 964f9ab into mui:master Mar 29, 2020
EsoterikStare pushed a commit to EsoterikStare/material-ui that referenced this pull request Mar 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: text field This is the name of the generic UI component, not the React module! new feature New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants