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

[Switch] Ref attribute fix (width bug) #19662

Closed
wants to merge 4 commits into from

Conversation

captain-yossarian
Copy link
Contributor

Closes #19613

Sorry, something went wrong.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
@captain-yossarian captain-yossarian changed the title [Switch] Ref attribute fix (width bug) [wip][Switch] Ref attribute fix (width bug) Feb 11, 2020
@mui-pr-bot
Copy link

mui-pr-bot commented Feb 11, 2020

Details of bundle changes.

Comparing: dbc1aee...fb334a4

bundle Size Change Size Gzip Change Gzip
@material-ui/core -- 362 kB ▲ +1 B (0.00% ) 98.9 kB
@material-ui/core[umd] -- 318 kB -- 92 kB
@material-ui/lab -- 193 kB -- 57.2 kB
@material-ui/styles -- 51.4 kB -- 15.4 kB
@material-ui/system -- 16.4 kB -- 4.3 kB
Alert -- 83.8 kB -- 26.3 kB
AlertTitle -- 64.5 kB -- 20.3 kB
AppBar -- 64.4 kB -- 20.2 kB
Autocomplete -- 132 kB -- 41.4 kB
Avatar -- 65.6 kB -- 20.7 kB
AvatarGroup -- 62.6 kB -- 19.7 kB
Backdrop -- 68.2 kB -- 21.1 kB
Badge -- 65.7 kB -- 20.4 kB
BottomNavigation -- 62.7 kB -- 19.7 kB
BottomNavigationAction -- 75.9 kB -- 24 kB
Box -- 72.2 kB -- 21.9 kB
Breadcrumbs -- 68.1 kB -- 21.4 kB
Button -- 80.1 kB -- 24.5 kB
ButtonBase -- 74.4 kB -- 23.3 kB
ButtonGroup -- 83.6 kB -- 25.6 kB
Card -- 63.2 kB -- 19.8 kB
CardActionArea -- 75.5 kB -- 23.8 kB
CardActions -- 62.4 kB -- 19.6 kB
CardContent -- 62.3 kB -- 19.5 kB
CardHeader -- 65.4 kB -- 20.6 kB
CardMedia -- 62.7 kB -- 19.7 kB
Checkbox -- 83.3 kB -- 26.3 kB
Chip -- 83 kB -- 25.4 kB
CircularProgress -- 64.4 kB -- 20.3 kB
ClickAwayListener -- 3.91 kB -- 1.55 kB
Collapse -- 68.4 kB -- 21.2 kB
colorManipulator -- 3.88 kB -- 1.52 kB
Container -- 63.5 kB -- 19.9 kB
CssBaseline -- 57.8 kB -- 18.1 kB
Dialog -- 83.4 kB -- 26 kB
DialogActions -- 62.4 kB -- 19.6 kB
DialogContent -- 62.6 kB -- 19.6 kB
DialogContentText -- 64.4 kB -- 20.2 kB
DialogTitle -- 64.6 kB -- 20.3 kB
Divider -- 63 kB -- 19.8 kB
docs.landing -- 56.4 kB -- 14.5 kB
docs.main -- 604 kB -- 196 kB
Drawer -- 85.2 kB -- 25.9 kB
ExpansionPanel -- 72.7 kB -- 22.7 kB
ExpansionPanelActions -- 62.4 kB -- 19.6 kB
ExpansionPanelDetails -- 62.3 kB -- 19.5 kB
ExpansionPanelSummary -- 78.5 kB -- 24.8 kB
Fab -- 77.2 kB -- 24.1 kB
Fade -- 23.6 kB -- 8.01 kB
FilledInput -- 73.9 kB -- 23 kB
FormControl -- 64.8 kB -- 20.2 kB
FormControlLabel -- 65.9 kB -- 20.7 kB
FormGroup -- 62.3 kB -- 19.6 kB
FormHelperText -- 63.7 kB -- 20 kB
FormLabel -- 63.8 kB -- 19.8 kB
Grid -- 65.4 kB -- 20.5 kB
GridList -- 62.8 kB -- 19.7 kB
GridListTile -- 64.1 kB -- 20.1 kB
GridListTileBar -- 63.6 kB -- 19.9 kB
Grow -- 24.2 kB -- 8.22 kB
Hidden -- 66.3 kB -- 20.8 kB
Icon -- 63.1 kB -- 19.8 kB
IconButton -- 76.5 kB -- 23.9 kB
Input -- 72.8 kB -- 22.8 kB
InputAdornment -- 65.4 kB -- 20.6 kB
InputBase -- 70.9 kB -- 22.3 kB
InputLabel -- 65.7 kB -- 20.5 kB
LinearProgress -- 65.7 kB -- 20.5 kB
Link -- 67 kB -- 21.2 kB
List -- 62.7 kB -- 19.6 kB
ListItem -- 77.5 kB -- 24.2 kB
ListItemAvatar -- 62.4 kB -- 19.5 kB
ListItemIcon -- 62.5 kB -- 19.6 kB
ListItemSecondaryAction -- 62.3 kB -- 19.5 kB
ListItemText -- 65.3 kB -- 20.5 kB
ListSubheader -- 63.1 kB -- 19.8 kB
Menu -- 89.1 kB -- 27.4 kB
MenuItem -- 78.6 kB -- 24.5 kB
MenuList -- 66.4 kB -- 20.8 kB
MobileStepper -- 68.2 kB -- 21.4 kB
Modal -- 14.5 kB -- 5.04 kB
NativeSelect -- 77.2 kB -- 24.3 kB
NoSsr -- 2.19 kB -- 1.04 kB
OutlinedInput -- 74.9 kB -- 23.3 kB
Pagination -- 85.5 kB -- 26.3 kB
PaginationItem -- 81.2 kB -- 25 kB
Paper -- 62.7 kB -- 19.6 kB
Popover -- 83.5 kB -- 25.8 kB
Popper -- 28.8 kB -- 10.3 kB
Portal -- 2.92 kB -- 1.3 kB
Radio -- 84.4 kB -- 26.6 kB
RadioGroup -- 64.8 kB -- 20.1 kB
Rating -- 70.8 kB -- 22.8 kB
RootRef -- 4.24 kB -- 1.64 kB
Select -- 117 kB -- 34.6 kB
Skeleton -- 63.3 kB -- 20 kB
Slide -- 25.7 kB -- 8.74 kB
Slider -- 77 kB -- 24.2 kB
Snackbar -- 75.7 kB -- 23.7 kB
SnackbarContent -- 63.9 kB -- 20.1 kB
SpeedDial -- 86.6 kB -- 27.3 kB
SpeedDialAction -- 119 kB -- 37.6 kB
SpeedDialIcon -- 64.9 kB -- 20.4 kB
Step -- 63 kB -- 19.8 kB
StepButton -- 82.7 kB -- 26.2 kB
StepConnector -- 63.1 kB -- 19.9 kB
StepContent -- 69.5 kB -- 21.8 kB
StepIcon -- 65 kB -- 20.3 kB
StepLabel -- 69 kB -- 21.7 kB
Stepper -- 65.2 kB -- 20.6 kB
styles/createMuiTheme -- 16.6 kB -- 5.85 kB
SvgIcon -- 63.4 kB -- 19.8 kB
SwipeableDrawer -- 92.6 kB -- 28.9 kB
Switch -- 82.5 kB -- 26 kB
Tab -- 76.7 kB -- 24.2 kB
Table -- 62.9 kB -- 19.7 kB
TableBody -- 62.4 kB -- 19.5 kB
TableCell -- 64.4 kB -- 20.3 kB
TableContainer -- 62.3 kB -- 19.5 kB
TableFooter -- 62.4 kB -- 19.5 kB
TableHead -- 62.4 kB -- 19.5 kB
TablePagination -- 144 kB -- 42 kB
TableRow -- 62.8 kB -- 19.7 kB
TableSortLabel -- 77.8 kB -- 24.4 kB
Tabs -- 86 kB -- 27.2 kB
TextareaAutosize -- 5.12 kB -- 2.14 kB
TextField -- 126 kB -- 36.6 kB
ToggleButton -- 76.5 kB -- 24.2 kB
ToggleButtonGroup -- 63.5 kB -- 20 kB
Toolbar -- 62.7 kB -- 19.7 kB
Tooltip -- 103 kB -- 32.4 kB
TreeItem -- 74.3 kB -- 23.5 kB
TreeView -- 67 kB -- 21.1 kB
Typography -- 64 kB -- 20 kB
useAutocomplete -- 14.7 kB -- 5.31 kB
useMediaQuery -- 2.58 kB -- 1.06 kB
Zoom -- 23.6 kB -- 8.12 kB

Generated by 🚫 dangerJS against fb334a4

@captain-yossarian captain-yossarian changed the title [wip][Switch] Ref attribute fix (width bug) [Switch] Ref attribute fix (width bug) Feb 11, 2020
Copy link
Member

@oliviertassinari oliviertassinari 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 taking on this issue. Now, I wonder if it's actually the best course of action. We would return the ref from the root element but spread the props on the input. Maybe we should wait for v5 to clear that up? @eps1lon

@oliviertassinari oliviertassinari added the component: switch This is the name of the generic UI component, not the React module! label Feb 13, 2020
@eps1lon
Copy link
Member

eps1lon commented Feb 13, 2020

Maybe we should wait for v5 to clear that up? @eps1lon

Well I had that in the back of my head but honestly wanted to avoid any further discussion about what the "root element" is.

Looking at this now it makes more sense to say

-Any other props supplied will be provided to the root element (IconButton).
+Any other props supplied will be provided to the IconButton.

and explain what we mean by root element (regarding ref forwarding).

But then again this is inconsistent once ref can be spread just like any other props (see React RFC concerning createElement deprecations).

Now I'm not even sure about this change. If you're interested in the bounding box then this is a fix. But if you want to programmatically focus the component this is a breaking change (though with a workaround by using inputRef instead).

@oliviertassinari
Copy link
Member

But then again this is inconsistent once ref can be spread just like any other props (see React RFC concerning createElement deprecations).

Yeah, great point. Let's have ref and the spread on the same element, we can revisit it in v5.

@oliviertassinari
Copy link
Member

@captain-yossarian Thanks for taking the time to look into this :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: switch 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.

[Switch] ref attribute is not the root element
4 participants