From d1b5fe379808cd70afc92ccc46c1f2e9cb7e6bca Mon Sep 17 00:00:00 2001
From: Serhii <sergiybiluk@gmail.com>
Date: Wed, 11 Mar 2020 19:34:22 +0100
Subject: [PATCH 1/5] initial

---
 docs/src/pages/components/selects/NativeSelects.tsx | 11 +----------
 docs/src/pages/components/selects/SimpleSelect.tsx  | 11 +----------
 2 files changed, 2 insertions(+), 20 deletions(-)

diff --git a/docs/src/pages/components/selects/NativeSelects.tsx b/docs/src/pages/components/selects/NativeSelects.tsx
index a1f1dca9468091..b72ecd8ef56d75 100644
--- a/docs/src/pages/components/selects/NativeSelects.tsx
+++ b/docs/src/pages/components/selects/NativeSelects.tsx
@@ -25,12 +25,6 @@ export default function NativeSelects() {
     name: 'hai',
   });
 
-  const inputLabel = React.useRef<HTMLLabelElement>(null);
-  const [labelWidth, setLabelWidth] = React.useState(0);
-  React.useEffect(() => {
-    setLabelWidth(inputLabel.current!.offsetWidth);
-  }, []);
-
   const handleChange = (name: keyof typeof state) => (
     event: React.ChangeEvent<{ value: unknown }>,
   ) => {
@@ -204,14 +198,11 @@ export default function NativeSelects() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-        <InputLabel ref={inputLabel} htmlFor="outlined-age-native-simple">
-          Age
-        </InputLabel>
+      <InputLabel htmlFor="outlined-age-native-simple">Age</InputLabel>
         <Select
           native
           value={state.age}
           onChange={handleChange('age')}
-          labelWidth={labelWidth}
           inputProps={{
             name: 'age',
             id: 'outlined-age-native-simple',
diff --git a/docs/src/pages/components/selects/SimpleSelect.tsx b/docs/src/pages/components/selects/SimpleSelect.tsx
index 1169db3fb5c9cf..5289b877a97a97 100644
--- a/docs/src/pages/components/selects/SimpleSelect.tsx
+++ b/docs/src/pages/components/selects/SimpleSelect.tsx
@@ -22,12 +22,6 @@ export default function SimpleSelect() {
   const classes = useStyles();
   const [age, setAge] = React.useState('');
 
-  const inputLabel = React.useRef<HTMLLabelElement>(null);
-  const [labelWidth, setLabelWidth] = React.useState(0);
-  React.useEffect(() => {
-    setLabelWidth(inputLabel.current!.offsetWidth);
-  }, []);
-
   const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
     setAge(event.target.value as string);
   };
@@ -197,15 +191,12 @@ export default function SimpleSelect() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-        <InputLabel ref={inputLabel} id="demo-simple-select-outlined-label">
-          Age
-        </InputLabel>
+      <InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
         <Select
           labelId="demo-simple-select-outlined-label"
           id="demo-simple-select-outlined"
           value={age}
           onChange={handleChange}
-          labelWidth={labelWidth}
         >
           <MenuItem value="">
             <em>None</em>

From 94a7f207026f5725e567ae67bbfb4143f70d4bf1 Mon Sep 17 00:00:00 2001
From: Serhii <sergiybiluk@gmail.com>
Date: Wed, 11 Mar 2020 19:41:21 +0100
Subject: [PATCH 2/5] prettier

---
 docs/src/pages/components/selects/NativeSelects.tsx | 2 +-
 docs/src/pages/components/selects/SimpleSelect.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/selects/NativeSelects.tsx b/docs/src/pages/components/selects/NativeSelects.tsx
index b72ecd8ef56d75..56feabfc81d050 100644
--- a/docs/src/pages/components/selects/NativeSelects.tsx
+++ b/docs/src/pages/components/selects/NativeSelects.tsx
@@ -198,7 +198,7 @@ export default function NativeSelects() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-      <InputLabel htmlFor="outlined-age-native-simple">Age</InputLabel>
+        <InputLabel htmlFor="outlined-age-native-simple">Age</InputLabel>
         <Select
           native
           value={state.age}
diff --git a/docs/src/pages/components/selects/SimpleSelect.tsx b/docs/src/pages/components/selects/SimpleSelect.tsx
index 5289b877a97a97..d661061cf610b2 100644
--- a/docs/src/pages/components/selects/SimpleSelect.tsx
+++ b/docs/src/pages/components/selects/SimpleSelect.tsx
@@ -191,7 +191,7 @@ export default function SimpleSelect() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-      <InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
+        <InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
         <Select
           labelId="demo-simple-select-outlined-label"
           id="demo-simple-select-outlined"

From ed50118c0378f042f2eb0b51fbf201c12bfc8b5e Mon Sep 17 00:00:00 2001
From: Serhii <sergiybiluk@gmail.com>
Date: Wed, 11 Mar 2020 19:49:27 +0100
Subject: [PATCH 3/5] update js

---
 docs/src/pages/components/selects/NativeSelects.js | 11 +----------
 docs/src/pages/components/selects/SimpleSelect.js  | 11 +----------
 2 files changed, 2 insertions(+), 20 deletions(-)

diff --git a/docs/src/pages/components/selects/NativeSelects.js b/docs/src/pages/components/selects/NativeSelects.js
index 550e6d4e23ba46..7bf5b7846a747c 100644
--- a/docs/src/pages/components/selects/NativeSelects.js
+++ b/docs/src/pages/components/selects/NativeSelects.js
@@ -23,12 +23,6 @@ export default function NativeSelects() {
     name: 'hai',
   });
 
-  const inputLabel = React.useRef(null);
-  const [labelWidth, setLabelWidth] = React.useState(0);
-  React.useEffect(() => {
-    setLabelWidth(inputLabel.current.offsetWidth);
-  }, []);
-
   const handleChange = name => event => {
     setState({
       ...state,
@@ -200,14 +194,11 @@ export default function NativeSelects() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-        <InputLabel ref={inputLabel} htmlFor="outlined-age-native-simple">
-          Age
-        </InputLabel>
+        <InputLabel htmlFor="outlined-age-native-simple">Age</InputLabel>
         <Select
           native
           value={state.age}
           onChange={handleChange('age')}
-          labelWidth={labelWidth}
           inputProps={{
             name: 'age',
             id: 'outlined-age-native-simple',
diff --git a/docs/src/pages/components/selects/SimpleSelect.js b/docs/src/pages/components/selects/SimpleSelect.js
index 6617d77e21eba3..5216e699a056da 100644
--- a/docs/src/pages/components/selects/SimpleSelect.js
+++ b/docs/src/pages/components/selects/SimpleSelect.js
@@ -20,12 +20,6 @@ export default function SimpleSelect() {
   const classes = useStyles();
   const [age, setAge] = React.useState('');
 
-  const inputLabel = React.useRef(null);
-  const [labelWidth, setLabelWidth] = React.useState(0);
-  React.useEffect(() => {
-    setLabelWidth(inputLabel.current.offsetWidth);
-  }, []);
-
   const handleChange = event => {
     setAge(event.target.value);
   };
@@ -195,15 +189,12 @@ export default function SimpleSelect() {
         <FormHelperText>Required</FormHelperText>
       </FormControl>
       <FormControl variant="outlined" className={classes.formControl}>
-        <InputLabel ref={inputLabel} id="demo-simple-select-outlined-label">
-          Age
-        </InputLabel>
+        <InputLabel id="demo-simple-select-outlined-label">Age</InputLabel>
         <Select
           labelId="demo-simple-select-outlined-label"
           id="demo-simple-select-outlined"
           value={age}
           onChange={handleChange}
-          labelWidth={labelWidth}
         >
           <MenuItem value="">
             <em>None</em>

From 22c80cd027546a6a28eb10207cf751b8af1a5abb Mon Sep 17 00:00:00 2001
From: Serhii <sergiybiluk@gmail.com>
Date: Thu, 12 Mar 2020 17:28:37 +0100
Subject: [PATCH 4/5] add label

---
 docs/src/pages/components/selects/NativeSelects.tsx | 1 +
 docs/src/pages/components/selects/SimpleSelect.tsx  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/docs/src/pages/components/selects/NativeSelects.tsx b/docs/src/pages/components/selects/NativeSelects.tsx
index 56feabfc81d050..02652ae8d8df3d 100644
--- a/docs/src/pages/components/selects/NativeSelects.tsx
+++ b/docs/src/pages/components/selects/NativeSelects.tsx
@@ -203,6 +203,7 @@ export default function NativeSelects() {
           native
           value={state.age}
           onChange={handleChange('age')}
+          label="Age"
           inputProps={{
             name: 'age',
             id: 'outlined-age-native-simple',
diff --git a/docs/src/pages/components/selects/SimpleSelect.tsx b/docs/src/pages/components/selects/SimpleSelect.tsx
index d661061cf610b2..45b1f6e3764069 100644
--- a/docs/src/pages/components/selects/SimpleSelect.tsx
+++ b/docs/src/pages/components/selects/SimpleSelect.tsx
@@ -197,6 +197,7 @@ export default function SimpleSelect() {
           id="demo-simple-select-outlined"
           value={age}
           onChange={handleChange}
+          label="Age"
         >
           <MenuItem value="">
             <em>None</em>

From 6c9231a3d602af9bbd2b27699baf242be6b5c187 Mon Sep 17 00:00:00 2001
From: Serhii <sergiybiluk@gmail.com>
Date: Thu, 12 Mar 2020 17:44:44 +0100
Subject: [PATCH 5/5] update js

---
 docs/src/pages/components/selects/NativeSelects.js | 1 +
 docs/src/pages/components/selects/SimpleSelect.js  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/docs/src/pages/components/selects/NativeSelects.js b/docs/src/pages/components/selects/NativeSelects.js
index 7bf5b7846a747c..d3945d59fe3056 100644
--- a/docs/src/pages/components/selects/NativeSelects.js
+++ b/docs/src/pages/components/selects/NativeSelects.js
@@ -199,6 +199,7 @@ export default function NativeSelects() {
           native
           value={state.age}
           onChange={handleChange('age')}
+          label="Age"
           inputProps={{
             name: 'age',
             id: 'outlined-age-native-simple',
diff --git a/docs/src/pages/components/selects/SimpleSelect.js b/docs/src/pages/components/selects/SimpleSelect.js
index 5216e699a056da..56380a289e6645 100644
--- a/docs/src/pages/components/selects/SimpleSelect.js
+++ b/docs/src/pages/components/selects/SimpleSelect.js
@@ -195,6 +195,7 @@ export default function SimpleSelect() {
           id="demo-simple-select-outlined"
           value={age}
           onChange={handleChange}
+          label="Age"
         >
           <MenuItem value="">
             <em>None</em>