[Select] Better support Preact

[glromeo]

A possible workaround for #18006

[mui-pr-bot]

Details of bundle changes.

Comparing: e09870b...c3b0f51

bundle	Size Change	Size	Gzip Change	Gzip
TextField	▲ +90 B (+0.07% )	120 kB	▲ +29 B (+0.08% )	35.2 kB
TablePagination	▲ +90 B (+0.07% )	138 kB	▲ +24 B (+0.06% )	40.4 kB
Select	▲ +90 B (+0.08% )	112 kB	▲ +23 B (+0.07% )	33.2 kB
@material-ui/core	▲ +90 B (+0.03% )	347 kB	▲ +22 B (+0.02% )	94.9 kB
@material-ui/core[umd]	▲ +90 B (+0.03% )	306 kB	▲ +19 B (+0.02% )	88.1 kB
@material-ui/lab	--	143 kB	--	44.6 kB
@material-ui/styles	--	50.8 kB	--	15.4 kB
@material-ui/system	--	14.8 kB	--	4.07 kB
AppBar	--	62.3 kB	--	19.5 kB
Avatar	--	61.1 kB	--	19.2 kB
Backdrop	--	66.2 kB	--	20.4 kB
Badge	--	63.8 kB	--	19.7 kB
BottomNavigation	--	60.8 kB	--	19 kB
BottomNavigationAction	--	73.8 kB	--	23.3 kB
Box	--	69.2 kB	--	20.9 kB
Breadcrumbs	--	66.4 kB	--	20.8 kB
Button	--	77.7 kB	--	24.1 kB
ButtonBase	--	72.2 kB	--	22.6 kB
ButtonGroup	--	62.6 kB	--	19.5 kB
Card	--	61.3 kB	--	19.2 kB
CardActionArea	--	73.3 kB	--	23.1 kB
CardActions	--	60.5 kB	--	18.9 kB
CardContent	--	60.4 kB	--	18.9 kB
CardHeader	--	63.5 kB	--	20 kB
CardMedia	--	60.8 kB	--	19.1 kB
Checkbox	--	80 kB	--	25.1 kB
Chip	--	69 kB	--	21.3 kB
CircularProgress	--	62.5 kB	--	19.7 kB
ClickAwayListener	--	3.85 kB	--	1.55 kB
Collapse	--	66.3 kB	--	20.5 kB
colorManipulator	--	3.83 kB	--	1.52 kB
Container	--	61.6 kB	--	19.2 kB
CssBaseline	--	56 kB	--	17.5 kB
Dialog	--	80.9 kB	--	25.1 kB
DialogActions	--	60.5 kB	--	18.9 kB
DialogContent	--	60.6 kB	--	19 kB
DialogContentText	--	62.5 kB	--	19.6 kB
DialogTitle	--	62.7 kB	--	19.7 kB
Divider	--	61 kB	--	19.1 kB
docs.landing	--	54.8 kB	--	14.5 kB
docs.main	--	600 kB	--	191 kB
Drawer	--	82.7 kB	--	25.6 kB
ExpansionPanel	--	69.5 kB	--	21.7 kB
ExpansionPanelActions	--	60.5 kB	--	18.9 kB
ExpansionPanelDetails	--	60.4 kB	--	18.9 kB
ExpansionPanelSummary	--	76.3 kB	--	24.1 kB
Fab	--	75.1 kB	--	23.3 kB
Fade	--	22 kB	--	7.6 kB
FilledInput	--	71.5 kB	--	22.2 kB
FormControl	--	62.7 kB	--	19.4 kB
FormControlLabel	--	63.9 kB	--	20.1 kB
FormGroup	--	60.4 kB	--	18.9 kB
FormHelperText	--	61.7 kB	--	19.3 kB
FormLabel	--	61.7 kB	--	19.1 kB
Grid	--	63.5 kB	--	19.9 kB
GridList	--	60.9 kB	--	19.1 kB
GridListTile	--	62.1 kB	--	19.5 kB
GridListTileBar	--	61.6 kB	--	19.3 kB
Grow	--	22.6 kB	--	7.72 kB
Hidden	--	64.5 kB	--	20.2 kB
Icon	--	61.2 kB	--	19.1 kB
IconButton	--	74.4 kB	--	23.2 kB
Input	--	70.5 kB	--	22 kB
InputAdornment	--	63.5 kB	--	20 kB
InputBase	--	68.6 kB	--	21.5 kB
InputLabel	--	63.5 kB	--	19.8 kB
LinearProgress	--	63.7 kB	--	19.8 kB
Link	--	65 kB	--	20.6 kB
List	--	60.8 kB	--	18.9 kB
ListItem	--	75.4 kB	--	23.5 kB
ListItemAvatar	--	60.5 kB	--	18.9 kB
ListItemIcon	--	60.6 kB	--	19 kB
ListItemSecondaryAction	--	60.4 kB	--	18.9 kB
ListItemText	--	63.4 kB	--	19.9 kB
ListSubheader	--	61.2 kB	--	19.2 kB
Menu	--	86.6 kB	--	27.2 kB
MenuItem	--	76.4 kB	--	23.8 kB
MenuList	--	64.4 kB	--	20.1 kB
MobileStepper	--	66.2 kB	--	20.6 kB
Modal	--	14.2 kB	--	4.97 kB
NativeSelect	--	74.8 kB	--	23.5 kB
NoSsr	--	2.19 kB	--	1.04 kB
OutlinedInput	--	72.1 kB	--	22.4 kB
Paper	--	60.8 kB	--	18.9 kB
Popover	--	81 kB	--	25 kB
Popper	--	28.3 kB	--	10.2 kB
Portal	--	2.87 kB	--	1.29 kB
Radio	--	80.9 kB	--	25.4 kB
RadioGroup	--	61.7 kB	--	19.3 kB
Rating	--	68.3 kB	--	21.8 kB
RootRef	--	4.43 kB	--	1.67 kB
Skeleton	--	60.9 kB	--	19.1 kB
Slide	--	24.1 kB	--	8.21 kB
Slider	--	73.7 kB	--	23.2 kB
Snackbar	--	75.6 kB	--	23.5 kB
SnackbarContent	--	64.2 kB	--	20.1 kB
SpeedDial	--	84.3 kB	--	26.5 kB
SpeedDialAction	--	113 kB	--	35.9 kB
SpeedDialIcon	--	63 kB	--	19.8 kB
Step	--	61 kB	--	19.1 kB
StepButton	--	80.6 kB	--	25.3 kB
StepConnector	--	61.1 kB	--	19.2 kB
StepContent	--	67.4 kB	--	21 kB
StepIcon	--	63.1 kB	--	19.6 kB
StepLabel	--	67 kB	--	21 kB
Stepper	--	63.3 kB	--	19.9 kB
styles/createMuiTheme	--	15.2 kB	--	5.36 kB
SvgIcon	--	61.5 kB	--	19.1 kB
SwipeableDrawer	--	89 kB	--	27.6 kB
Switch	--	79.3 kB	--	24.7 kB
Tab	--	74.6 kB	--	23.6 kB
Table	--	61 kB	--	19.1 kB
TableBody	--	60.5 kB	--	18.9 kB
TableCell	--	62.5 kB	--	19.6 kB
TableFooter	--	60.5 kB	--	18.9 kB
TableHead	--	60.5 kB	--	18.9 kB
TableRow	--	60.9 kB	--	19.1 kB
TableSortLabel	--	75.6 kB	--	23.9 kB
Tabs	--	83.7 kB	--	26.7 kB
TextareaAutosize	--	5.06 kB	--	2.11 kB
ToggleButton	--	74.4 kB	--	23.5 kB
ToggleButtonGroup	--	61.6 kB	--	19.3 kB
Toolbar	--	60.7 kB	--	19 kB
Tooltip	--	97.5 kB	--	30.9 kB
TreeItem	--	71.8 kB	--	22.6 kB
TreeView	--	64.4 kB	--	20.2 kB
Typography	--	62.1 kB	--	19.3 kB
useMediaQuery	--	2.49 kB	--	1.05 kB
Zoom	--	22.1 kB	--	7.61 kB

Generated by 🚫 dangerJS against c3b0f51

[oliviertassinari]

This sounds like a good tradeoff. I would only suggest a comment to explain for people that read the sources: why?

[eps1lon]

@glromeo This PR is ready to be tested in codesandbox. See https://codesandbox.io/s/create-react-app-qb2z7 for an example. Would you be so kind and prepare a codesandbox using preact and a Select so that we can verify it works? That would help us a lot, thanks 👍

[oliviertassinari]

Do we have an option in codesandbox to force the usage of preact instead of react by all the dependencies? If it's possible, that would be neat.
Alternatively, a less ideal solution to test the changes is https://github.com/mui-org/material-ui/tree/master/examples/preact combined with a manual edit of the node_modules.

[eps1lon]

We shouldnt have a direct dependency on react.

[oliviertassinari]

Ok, I could test the changes with Preact, it works. However, this won't close the Preact support chapter. For instance, the focus behavior is wrong. The native select still provide a superior UX with Preact. I would propose that allocate minimum resources to support Preact, at least, give it attention in correlation to the Preact market share: https://npm-stat.com/charts.html?package=preact,react

I think that we can accept the changes because it's hopefully, the only and last time we need to do custom work for Preact support. But I'm wondering how it's going to evolve if we start to use the low level React UI elements in the future (will Preact be able to keep up?). At the same time, as AMP moves to Preact, does it gives us an advantage to support Preact?

[oliviertassinari]

@glromeo Thanks

[c-dante]

@oliviertassinari you can see my codesandbox with preact replacing react here:

https://codesandbox.io/s/preact-material-ui-select-broken-eles6?fontsize=14

I couldn't get JSX top work in that environment (didn't spend too much time), here's the interesting bit in package.json:

//  [...]
  "alias": {
    "react": "preact/compat",
    "react-dom": "preact/compat"
  }

[oliviertassinari]

Great, Parcel to the rescue: https://codesandbox.io/s/preact-material-ui-select-broken-rmwrc.