[TextField] Fix label not being associated with native select (#18141)

mui · Nov 1, 2019 · 54d1603 · 54d1603
1 parent 13b3a0d
commit 54d1603
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 12 deletions.
diff --git a/docs/src/pages/components/text-fields/ValidationTextFields.js b/docs/src/pages/components/text-fields/ValidationTextFields.js
@@ -30,7 +30,7 @@ export default function ValidationTextFields() {
         />
         <TextField
           error
-          id="standard-error"
+          id="standard-error-helper-text"
           label="Error"
           defaultValue="Hello World"
           helperText="Incorrect entry."
@@ -50,7 +50,7 @@ export default function ValidationTextFields() {
         />
         <TextField
           error
-          id="filled-error"
+          id="filled-error-helper-text"
           label="Error"
           defaultValue="Hello World"
           helperText="Incorrect entry."
@@ -71,7 +71,7 @@ export default function ValidationTextFields() {
         />
         <TextField
           error
-          id="outlined-error"
+          id="outlined-error-helper-text"
           label="Error"
           defaultValue="Hello World"
           helperText="Incorrect entry."

diff --git a/docs/src/pages/components/text-fields/ValidationTextFields.tsx b/docs/src/pages/components/text-fields/ValidationTextFields.tsx
@@ -32,7 +32,7 @@ export default function ValidationTextFields() {
         />
         <TextField
           error
-          id="standard-error"
+          id="standard-error-helper-text"
           label="Error"
           defaultValue="Hello World"
           helperText="Incorrect entry."
@@ -52,7 +52,7 @@ export default function ValidationTextFields() {
         />
         <TextField
           error
-          id="filled-error"
+          id="filled-error-helper-text"
           label="Error"
           defaultValue="Hello World"
           helperText="Incorrect entry."
@@ -73,7 +73,7 @@ export default function ValidationTextFields() {
         />
         <TextField
           error
-          id="outlined-error"
+          id="outlined-error-helper-text"
           label="Error"
           defaultValue="Hello World"
           helperText="Incorrect entry."

diff --git a/packages/material-ui/src/TextField/TextField.js b/packages/material-ui/src/TextField/TextField.js
@@ -121,7 +121,9 @@ const TextField = React.forwardRef(function TextField(props, ref) {
   }
   if (select) {
     // unset defaults from textbox inputs
-    InputMore.id = undefined;
+    if (!SelectProps || !SelectProps.native) {
+      InputMore.id = undefined;
+    }
     InputMore['aria-describedby'] = undefined;
   }
 

diff --git a/packages/material-ui/src/TextField/TextField.test.js b/packages/material-ui/src/TextField/TextField.test.js
@@ -117,10 +117,10 @@ describe('<TextField />', () => {
   });
 
   describe('prop: select', () => {
-    it('should be able to render a select as expected', () => {
+    it('can render a <select /> when `native`', () => {
       const currencies = [{ value: 'USD', label: '$' }, { value: 'BTC', label: '฿' }];
 
-      const { getByRole } = render(
+      const { container } = render(
         <TextField select SelectProps={{ native: true }}>
           {currencies.map(option => (
             <option key={option.value} value={option.value}>
@@ -130,10 +130,25 @@ describe('<TextField />', () => {
         </TextField>,
       );
 
-      const select = getByRole('listbox');
-
+      const select = container.querySelector('select');
       expect(select).to.be.ok;
-      expect(select.querySelectorAll('option')).to.have.lengthOf(2);
+      expect(select.options).to.have.lengthOf(2);
+    });
+
+    it('associates the label with the <select /> when `native={true}` and `id`', () => {
+      const { getByLabelText } = render(
+        <TextField
+          label="Currency:"
+          id="labelled-select"
+          select
+          SelectProps={{ native: true }}
+          value="$"
+        >
+          <option value="dollar">$</option>
+        </TextField>,
+      );
+
+      expect(getByLabelText('Currency:')).to.have.property('value', 'dollar');
     });
 
     it('renders a combobox with the appropriate accessible name', () => {