[Select] Fix incorrect event.target type in onChange

docs/src/pages/demos/dialogs/MaxWidthDialog.js

@@ -46,7 +46,9 @@ class MaxWidthDialog extends React.Component {
   };
 
   handleMaxWidthChange = event => {
-    this.setState({ maxWidth: event.target.value });
+    const maxWidth = event.target.value === 'false' ? false : event.target.value;
+
+    this.setState({ maxWidth });
   };
 
   handleFullWidthChange = event => {
@@ -84,7 +86,7 @@ class MaxWidthDialog extends React.Component {
                     id: 'max-width',
                   }}
                 >
-                  <MenuItem value={false}>false</MenuItem>
+                  <MenuItem value="false">false</MenuItem>
                   <MenuItem value="xs">xs</MenuItem>
                   <MenuItem value="sm">sm</MenuItem>
                   <MenuItem value="md">md</MenuItem>

docs/src/pages/demos/dialogs/MaxWidthDialog.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Dialog, { DialogProps } from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import FormControl from '@material-ui/core/FormControl';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+import Switch from '@material-ui/core/Switch';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    form: {
+      display: 'flex',
+      flexDirection: 'column',
+      margin: 'auto',
+      width: 'fit-content',
+    },
+    formControl: {
+      marginTop: theme.spacing(2),
+      minWidth: 120,
+    },
+    formControlLabel: {
+      marginTop: theme.spacing(1),
+    },
+  });
+
+export type MaxWidthDialogProps = WithStyles<typeof styles>;
+
+export interface MaxWidthDialogState {
+  open: boolean;
+  fullWidth: boolean;
+  maxWidth: DialogProps['maxWidth'];
+}
+
+class MaxWidthDialog extends React.Component<MaxWidthDialogProps, MaxWidthDialogState> {
+  state: MaxWidthDialogState = {
+    open: false,
+    fullWidth: true,
+    maxWidth: 'sm',
+  };
+
+  handleClickOpen = () => {
+    this.setState({ open: true });
+  };
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
+  handleMaxWidthChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const maxWidth =
+      event.target.value === 'false' ? false : (event.target.value as DialogProps['maxWidth']);
+
+    this.setState({ maxWidth });
+  };
+
+  handleFullWidthChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ fullWidth: event.target.checked });
+  };
+
+  render() {
+    const { classes } = this.props;
+
+    return (
+      <React.Fragment>
+        <Button variant="outlined" color="primary" onClick={this.handleClickOpen}>
+          Open max-width dialog
+        </Button>
+        <Dialog
+          fullWidth={this.state.fullWidth}
+          maxWidth={this.state.maxWidth}
+          open={this.state.open}
+          onClose={this.handleClose}
+          aria-labelledby="max-width-dialog-title"
+        >
+          <DialogTitle id="max-width-dialog-title">Optional sizes</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              You can set my maximum width and whether to adapt or not.
+            </DialogContentText>
+            <form className={classes.form} noValidate>
+              <FormControl className={classes.formControl}>
+                <InputLabel htmlFor="max-width">maxWidth</InputLabel>
+                <Select
+                  value={this.state.maxWidth}
+                  onChange={this.handleMaxWidthChange}
+                  inputProps={{
+                    name: 'max-width',
+                    id: 'max-width',
+                  }}
+                >
+                  <MenuItem value="false">false</MenuItem>
+                  <MenuItem value="xs">xs</MenuItem>
+                  <MenuItem value="sm">sm</MenuItem>
+                  <MenuItem value="md">md</MenuItem>
+                  <MenuItem value="lg">lg</MenuItem>
+                  <MenuItem value="xl">xl</MenuItem>
+                </Select>
+              </FormControl>
+              <FormControlLabel
+                className={classes.formControlLabel}
+                control={
+                  <Switch
+                    checked={this.state.fullWidth}
+                    onChange={this.handleFullWidthChange}
+                    value="fullWidth"
+                  />
+                }
+                label="Full width"
+              />
+            </form>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleClose} color="primary">
+              Close
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </React.Fragment>
+    );
+  }
+}
+
+(MaxWidthDialog as React.ComponentClass<MaxWidthDialogProps, MaxWidthDialogState>).propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(MaxWidthDialog);