[Select] Add labelId to implement proper labelling (#17892)

mui · Oct 24, 2019 · fdafbc5 · fdafbc5
1 parent 41ca73e
commit fdafbc5
Show file tree

Hide file tree

Showing 18 changed files with 358 additions and 265 deletions.
diff --git a/docs/pages/api/select.md b/docs/pages/api/select.md
@@ -31,6 +31,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">IconComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">ArrowDropDownIcon</span> | The icon that displays the arrow. |
 | <span class="prop-name">input</span> | <span class="prop-type">element</span> |  | An `Input` element; does not have to be a material-ui specific `Input`. |
 | <span class="prop-name">inputProps</span> | <span class="prop-type">object</span> |  | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. When `native` is `true`, the attributes are applied on the `select` element. |
+| <span class="prop-name">labelId</span> | <span class="prop-type">string</span> |  | The idea of an element that acts as an additional label. The Select will be labelled by the additional label and the selected value. |
 | <span class="prop-name">labelWidth</span> | <span class="prop-type">number</span> | <span class="prop-default">0</span> | The label width to be used on OutlinedInput. This prop is required when the `variant` prop is `outlined`. |
 | <span class="prop-name">MenuProps</span> | <span class="prop-type">object</span> |  | Props applied to the [`Menu`](/api/menu/) element. |
 | <span class="prop-name">multiple</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If true, `value` must be an array and the menu will support multiple selections. |

diff --git a/docs/src/pages/components/selects/ControlledOpenSelect.js b/docs/src/pages/components/selects/ControlledOpenSelect.js
@@ -40,17 +40,15 @@ export default function ControlledOpenSelect() {
         Open the select
       </Button>
       <FormControl className={classes.formControl}>
-        <InputLabel htmlFor="demo-controlled-open-select">Age</InputLabel>
+        <InputLabel id="demo-controlled-open-select-label">Age</InputLabel>
         <Select
+          labelId="demo-controlled-open-select-label"
+          id="demo-controlled-open-select"
           open={open}
           onClose={handleClose}
           onOpen={handleOpen}
           value={age}
           onChange={handleChange}
-          inputProps={{
-            name: 'age',
-            id: 'demo-controlled-open-select',
-          }}
         >
           <MenuItem value="">
             <em>None</em>

diff --git a/docs/src/pages/components/selects/ControlledOpenSelect.tsx b/docs/src/pages/components/selects/ControlledOpenSelect.tsx
@@ -42,17 +42,15 @@ export default function ControlledOpenSelect() {
         Open the select
       </Button>
       <FormControl className={classes.formControl}>
-        <InputLabel htmlFor="demo-controlled-open-select">Age</InputLabel>
+        <InputLabel id="demo-controlled-open-select-label">Age</InputLabel>
         <Select
+          labelId="demo-controlled-open-select-label"
+          id="demo-controlled-open-select"
           open={open}
           onClose={handleClose}
           onOpen={handleOpen}
           value={age}
           onChange={handleChange}
-          inputProps={{
-            name: 'age',
-            id: 'demo-controlled-open-select',
-          }}
         >
           <MenuItem value="">
             <em>None</em>

diff --git a/docs/src/pages/components/selects/CustomizedSelects.js b/docs/src/pages/components/selects/CustomizedSelects.js
@@ -61,15 +61,17 @@ export default function CustomizedSelects() {
   return (
     <form className={classes.root} autoComplete="off">
       <FormControl className={classes.margin}>
-        <InputLabel htmlFor="age-customized-input">Age</InputLabel>
-        <BootstrapInput id="age-customized-input" />
+        <InputLabel htmlFor="demo-customized-textbox">Age</InputLabel>
+        <BootstrapInput id="demo-customized-textbox" />
       </FormControl>
       <FormControl className={classes.margin}>
-        <InputLabel htmlFor="age-customized-select">Age</InputLabel>
+        <InputLabel id="demo-customized-select-label">Age</InputLabel>
         <Select
+          labelId="demo-customized-select-label"
+          id="demo-customized-select"
           value={age}
           onChange={handleChange}
-          input={<BootstrapInput name="age" id="age-customized-select" />}
+          input={<BootstrapInput />}
         >
           <MenuItem value="">
             <em>None</em>
@@ -80,11 +82,12 @@ export default function CustomizedSelects() {
         </Select>
       </FormControl>
       <FormControl className={classes.margin}>
-        <InputLabel htmlFor="age-customized-native-simple">Age</InputLabel>
+        <InputLabel htmlFor="demo-customized-select-native">Age</InputLabel>
         <NativeSelect
+          id="demo-customized-select-native"
           value={age}
           onChange={handleChange}
-          input={<BootstrapInput name="age" id="age-customized-native-simple" />}
+          input={<BootstrapInput />}
         >
           <option value="" />
           <option value={10}>Ten</option>

diff --git a/docs/src/pages/components/selects/CustomizedSelects.tsx b/docs/src/pages/components/selects/CustomizedSelects.tsx
@@ -65,15 +65,17 @@ export default function CustomizedSelects() {
   return (
     <form className={classes.root} autoComplete="off">
       <FormControl className={classes.margin}>
-        <InputLabel htmlFor="age-customized-input">Age</InputLabel>
-        <BootstrapInput id="age-customized-input" />
+        <InputLabel htmlFor="demo-customized-textbox">Age</InputLabel>
+        <BootstrapInput id="demo-customized-textbox" />
       </FormControl>
       <FormControl className={classes.margin}>
-        <InputLabel htmlFor="age-customized-select">Age</InputLabel>
+        <InputLabel id="demo-customized-select-label">Age</InputLabel>
         <Select
+          labelId="demo-customized-select-label"
+          id="demo-customized-select"
           value={age}
           onChange={handleChange}
-          input={<BootstrapInput name="age" id="age-customized-select" />}
+          input={<BootstrapInput />}
         >
           <MenuItem value="">
             <em>None</em>
@@ -84,11 +86,12 @@ export default function CustomizedSelects() {
         </Select>
       </FormControl>
       <FormControl className={classes.margin}>
-        <InputLabel htmlFor="age-customized-native-simple">Age</InputLabel>
+        <InputLabel htmlFor="demo-customized-select-native">Age</InputLabel>
         <NativeSelect
+          id="demo-customized-select-native"
           value={age}
           onChange={handleChange}
-          input={<BootstrapInput name="age" id="age-customized-native-simple" />}
+          input={<BootstrapInput />}
         >
           <option value="" />
           <option value={10}>Ten</option>

diff --git a/docs/src/pages/components/selects/DialogSelect.js b/docs/src/pages/components/selects/DialogSelect.js
@@ -24,37 +24,35 @@ const useStyles = makeStyles(theme => ({
 
 export default function DialogSelect() {
   const classes = useStyles();
-  const [state, setState] = React.useState({
-    open: false,
-    age: '',
-  });
+  const [open, setOpen] = React.useState(false);
+  const [age, setAge] = React.useState('');
 
-  const handleChange = name => event => {
-    setState({ ...state, [name]: Number(event.target.value) || '' });
+  const handleChange = event => {
+    setAge(Number(event.target.value) || '');
   };
 
   const handleClickOpen = () => {
-    setState({ ...state, open: true });
+    setOpen(true);
   };
 
   const handleClose = () => {
-    setState({ ...state, open: false });
+    setOpen(false);
   };
 
   return (
     <div>
       <Button onClick={handleClickOpen}>Open select dialog</Button>
-      <Dialog disableBackdropClick disableEscapeKeyDown open={state.open} onClose={handleClose}>
+      <Dialog disableBackdropClick disableEscapeKeyDown open={open} onClose={handleClose}>
         <DialogTitle>Fill the form</DialogTitle>
         <DialogContent>
           <form className={classes.container}>
             <FormControl className={classes.formControl}>
-              <InputLabel htmlFor="age-native-simple">Age</InputLabel>
+              <InputLabel htmlFor="demo-dialog-native">Age</InputLabel>
               <Select
                 native
-                value={state.age}
-                onChange={handleChange('age')}
-                input={<Input id="age-native-simple" />}
+                value={age}
+                onChange={handleChange}
+                input={<Input id="demo-dialog-native" />}
               >
                 <option value="" />
                 <option value={10}>Ten</option>
@@ -63,11 +61,13 @@ export default function DialogSelect() {
               </Select>
             </FormControl>
             <FormControl className={classes.formControl}>
-              <InputLabel htmlFor="age-simple">Age</InputLabel>
+              <InputLabel id="demo-dialog-select-label">Age</InputLabel>
               <Select
-                value={state.age}
-                onChange={handleChange('age')}
-                input={<Input id="age-simple" />}
+                labelId="demo-dialog-select-label"
+                id="demo-dialog-select"
+                value={age}
+                onChange={handleChange}
+                input={<Input />}
               >
                 <MenuItem value="">
                   <em>None</em>

diff --git a/docs/src/pages/components/selects/DialogSelect.tsx b/docs/src/pages/components/selects/DialogSelect.tsx
@@ -26,39 +26,35 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export default function DialogSelect() {
   const classes = useStyles();
-  const [state, setState] = React.useState({
-    open: false,
-    age: '',
-  });
+  const [open, setOpen] = React.useState(false);
+  const [age, setAge] = React.useState<number | string>('');
 
-  const handleChange = (name: keyof typeof state) => (
-    event: React.ChangeEvent<{ value: unknown }>,
-  ) => {
-    setState({ ...state, [name]: Number(event.target.value) || '' });
+  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setAge(Number(event.target.value) || '');
   };
 
   const handleClickOpen = () => {
-    setState({ ...state, open: true });
+    setOpen(true);
   };
 
   const handleClose = () => {
-    setState({ ...state, open: false });
+    setOpen(false);
   };
 
   return (
     <div>
       <Button onClick={handleClickOpen}>Open select dialog</Button>
-      <Dialog disableBackdropClick disableEscapeKeyDown open={state.open} onClose={handleClose}>
+      <Dialog disableBackdropClick disableEscapeKeyDown open={open} onClose={handleClose}>
         <DialogTitle>Fill the form</DialogTitle>
         <DialogContent>
           <form className={classes.container}>
             <FormControl className={classes.formControl}>
-              <InputLabel htmlFor="age-native-simple">Age</InputLabel>
+              <InputLabel htmlFor="demo-dialog-native">Age</InputLabel>
               <Select
                 native
-                value={state.age}
-                onChange={handleChange('age')}
-                input={<Input id="age-native-simple" />}
+                value={age}
+                onChange={handleChange}
+                input={<Input id="demo-dialog-native" />}
               >
                 <option value="" />
                 <option value={10}>Ten</option>
@@ -67,11 +63,13 @@ export default function DialogSelect() {
               </Select>
             </FormControl>
             <FormControl className={classes.formControl}>
-              <InputLabel htmlFor="age-simple">Age</InputLabel>
+              <InputLabel id="demo-dialog-select-label">Age</InputLabel>
               <Select
-                value={state.age}
-                onChange={handleChange('age')}
-                input={<Input id="age-simple" />}
+                labelId="demo-dialog-select-label"
+                id="demo-dialog-select"
+                value={age}
+                onChange={handleChange}
+                input={<Input />}
               >
                 <MenuItem value="">
                   <em>None</em>

diff --git a/docs/src/pages/components/selects/MultipleSelect.js b/docs/src/pages/components/selects/MultipleSelect.js
@@ -88,12 +88,14 @@ export default function MultipleSelect() {
   return (
     <div className={classes.root}>
       <FormControl className={classes.formControl}>
-        <InputLabel htmlFor="select-multiple">Name</InputLabel>
+        <InputLabel id="demo-mutiple-name-label">Name</InputLabel>
         <Select
+          labelId="demo-mutiple-name-label"
+          id="demo-mutiple-name"
           multiple
           value={personName}
           onChange={handleChange}
-          input={<Input id="select-multiple" />}
+          input={<Input />}
           MenuProps={MenuProps}
         >
           {names.map(name => (
@@ -104,12 +106,14 @@ export default function MultipleSelect() {
         </Select>
       </FormControl>
       <FormControl className={classes.formControl}>
-        <InputLabel htmlFor="select-multiple-checkbox">Tag</InputLabel>
+        <InputLabel id="demo-mutiple-checkbox-label">Tag</InputLabel>
         <Select
+          labelId="demo-mutiple-checkbox-label"
+          id="demo-mutiple-checkbox"
           multiple
           value={personName}
           onChange={handleChange}
-          input={<Input id="select-multiple-checkbox" />}
+          input={<Input />}
           renderValue={selected => selected.join(', ')}
           MenuProps={MenuProps}
         >
@@ -122,8 +126,10 @@ export default function MultipleSelect() {
         </Select>
       </FormControl>
       <FormControl className={classes.formControl}>
-        <InputLabel htmlFor="select-multiple-chip">Chip</InputLabel>
+        <InputLabel id="demo-mutiple-chip-label">Chip</InputLabel>
         <Select
+          labelId="demo-mutiple-chip-label"
+          id="demo-mutiple-chip"
           multiple
           value={personName}
           onChange={handleChange}
@@ -150,7 +156,7 @@ export default function MultipleSelect() {
           displayEmpty
           value={personName}
           onChange={handleChange}
-          input={<Input id="select-multiple-placeholder" />}
+          input={<Input />}
           renderValue={selected => {
             if (selected.length === 0) {
               return <em>Placeholder</em>;

diff --git a/docs/src/pages/components/selects/MultipleSelect.tsx b/docs/src/pages/components/selects/MultipleSelect.tsx
@@ -90,12 +90,14 @@ export default function MultipleSelect() {
   return (
     <div className={classes.root}>
       <FormControl className={classes.formControl}>
-        <InputLabel htmlFor="select-multiple">Name</InputLabel>
+        <InputLabel id="demo-mutiple-name-label">Name</InputLabel>
         <Select
+          labelId="demo-mutiple-name-label"
+          id="demo-mutiple-name"
           multiple
           value={personName}
           onChange={handleChange}
-          input={<Input id="select-multiple" />}
+          input={<Input />}
           MenuProps={MenuProps}
         >
           {names.map(name => (
@@ -106,12 +108,14 @@ export default function MultipleSelect() {
         </Select>
       </FormControl>
       <FormControl className={classes.formControl}>
-        <InputLabel htmlFor="select-multiple-checkbox">Tag</InputLabel>
+        <InputLabel id="demo-mutiple-checkbox-label">Tag</InputLabel>
         <Select
+          labelId="demo-mutiple-checkbox-label"
+          id="demo-mutiple-checkbox"
           multiple
           value={personName}
           onChange={handleChange}
-          input={<Input id="select-multiple-checkbox" />}
+          input={<Input />}
           renderValue={selected => (selected as string[]).join(', ')}
           MenuProps={MenuProps}
         >
@@ -124,8 +128,10 @@ export default function MultipleSelect() {
         </Select>
       </FormControl>
       <FormControl className={classes.formControl}>
-        <InputLabel htmlFor="select-multiple-chip">Chip</InputLabel>
+        <InputLabel id="demo-mutiple-chip-label">Chip</InputLabel>
         <Select
+          labelId="demo-mutiple-chip-label"
+          id="demo-mutiple-chip"
           multiple
           value={personName}
           onChange={handleChange}
@@ -152,7 +158,7 @@ export default function MultipleSelect() {
           displayEmpty
           value={personName}
           onChange={handleChange}
-          input={<Input id="select-multiple-placeholder" />}
+          input={<Input />}
           renderValue={selected => {
             if ((selected as string[]).length === 0) {
               return <em>Placeholder</em>;