Repository: uber-web/baseui
Pull request #557 (2018-11-28 22:10:48)

fix(select): fix control's height in a disabled state with no value


Patch:
diff --git a/src/select/select.js b/src/select/select.js
index cbfae39c4..f2203cc3a 100644
--- a/src/select/select.js
+++ b/src/select/select.js
@@ -573,6 +573,8 @@ class Select extends React.Component<PropsT, SelectStateT> {
       'aria-describedby': this.props['aria-describedby'],
       'aria-labelledby': this.props['aria-labelledby'],
       'aria-autocomplete': 'list',
+      'aria-disabled': this.props.disabled || null,
+      disabled: this.props.disabled || null,
       inputRef: ref => (this.input = ref),
       onBlur: this.handleInputBlur,
       onChange: this.handleInputChange,
@@ -582,7 +584,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
       role: 'combobox',
       value,
     };
-    if (this.props.disabled || !this.props.searchable) {
+    if (!this.props.searchable) {
       return (
         <InputContainer
           aria-expanded={isOpen}


Test patch:
diff --git a/src/select/__tests__/__snapshots__/select.test.js.snap b/src/select/__tests__/__snapshots__/select.test.js.snap
index f9874f441..930bb7b28 100644
--- a/src/select/__tests__/__snapshots__/select.test.js.snap
+++ b/src/select/__tests__/__snapshots__/select.test.js.snap
@@ -248,10 +248,12 @@ exports[`Select component renders component in search mode and false for multipl
                     $type="search"
                     aria-autocomplete="list"
                     aria-describedby={null}
+                    aria-disabled={null}
                     aria-expanded={false}
                     aria-haspopup={false}
                     aria-label={null}
                     aria-labelledby={null}
+                    disabled={null}
                     inputRef={[Function]}
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -281,10 +283,12 @@ exports[`Select component renders component in search mode and false for multipl
                       $width="5px"
                       aria-autocomplete="list"
                       aria-describedby={null}
+                      aria-disabled={null}
                       aria-expanded={false}
                       aria-haspopup={false}
                       aria-label={null}
                       aria-labelledby={null}
+                      disabled={null}
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
@@ -295,10 +299,12 @@ exports[`Select component renders component in search mode and false for multipl
                       <input
                         aria-autocomplete="list"
                         aria-describedby={null}
+                        aria-disabled={null}
                         aria-expanded={false}
                         aria-haspopup={false}
                         aria-label={null}
                         aria-labelledby={null}
+                        disabled={null}
                         onBlur={[Function]}
                         onChange={[Function]}
                         onFocus={[Function]}
@@ -575,10 +581,12 @@ exports[`Select component renders component in search mode and true for multiple
                     $type="search"
                     aria-autocomplete="list"
                     aria-describedby={null}
+                    aria-disabled={null}
                     aria-expanded={false}
                     aria-haspopup={false}
                     aria-label={null}
                     aria-labelledby={null}
+                    disabled={null}
                     inputRef={[Function]}
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -608,10 +616,12 @@ exports[`Select component renders component in search mode and true for multiple
                       $width="5px"
                       aria-autocomplete="list"
                       aria-describedby={null}
+                      aria-disabled={null}
                       aria-expanded={false}
                       aria-haspopup={false}
                       aria-label={null}
                       aria-labelledby={null}
+                      disabled={null}
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
@@ -622,10 +632,12 @@ exports[`Select component renders component in search mode and true for multiple
                       <input
                         aria-autocomplete="list"
                         aria-describedby={null}
+                        aria-disabled={null}
                         aria-expanded={false}
                         aria-haspopup={false}
                         aria-label={null}
                         aria-labelledby={null}
+                        disabled={null}
                         onBlur={[Function]}
                         onChange={[Function]}
                         onFocus={[Function]}
@@ -822,10 +834,12 @@ exports[`Select component renders component in select mode and false for multipl
                     $type="select"
                     aria-autocomplete="list"
                     aria-describedby={null}
+                    aria-disabled={null}
                     aria-expanded={false}
                     aria-haspopup={false}
                     aria-label={null}
                     aria-labelledby={null}
+                    disabled={null}
                     inputRef={[Function]}
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -855,10 +869,12 @@ exports[`Select component renders component in select mode and false for multipl
                       $width="5px"
                       aria-autocomplete="list"
                       aria-describedby={null}
+                      aria-disabled={null}
                       aria-expanded={false}
                       aria-haspopup={false}
                       aria-label={null}
                       aria-labelledby={null}
+                      disabled={null}
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
@@ -869,10 +885,12 @@ exports[`Select component renders component in select mode and false for multipl
                       <input
                         aria-autocomplete="list"
                         aria-describedby={null}
+                        aria-disabled={null}
                         aria-expanded={false}
                         aria-haspopup={false}
                         aria-label={null}
                         aria-labelledby={null}
+                        disabled={null}
                         onBlur={[Function]}
                         onChange={[Function]}
                         onFocus={[Function]}
@@ -1142,10 +1160,12 @@ exports[`Select component renders component in select mode and true for multiple
                     $type="select"
                     aria-autocomplete="list"
                     aria-describedby={null}
+                    aria-disabled={null}
                     aria-expanded={false}
                     aria-haspopup={false}
                     aria-label={null}
                     aria-labelledby={null}
+                    disabled={null}
                     inputRef={[Function]}
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -1175,10 +1195,12 @@ exports[`Select component renders component in select mode and true for multiple
                       $width="5px"
                       aria-autocomplete="list"
                       aria-describedby={null}
+                      aria-disabled={null}
                       aria-expanded={false}
                       aria-haspopup={false}
                       aria-label={null}
                       aria-labelledby={null}
+                      disabled={null}
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
@@ -1189,10 +1211,12 @@ exports[`Select component renders component in select mode and true for multiple
                       <input
                         aria-autocomplete="list"
                         aria-describedby={null}
+                        aria-disabled={null}
                         aria-expanded={false}
                         aria-haspopup={false}
                         aria-label={null}
                         aria-labelledby={null}
+                        disabled={null}
                         onBlur={[Function]}
                         onChange={[Function]}
                         onFocus={[Function]}