fix combobox bugs introduced by isDisabled prop (#838)

* fix combobox bugs introduced by isDisabled prop * changelog
elastic · May 17, 2018 · f7beb61 · f7beb61
1 parent 1b17e33
commit f7beb61
Show file tree

Hide file tree

Showing 5 changed files with 313 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,10 @@
 - Move `EuiBasicTable`'s `itemId` prop from `selection` to a top-level property ([#830](https://github.com/elastic/eui/pull/830))
 - Renamed/refactored `requiresAriaLabel` prop validator to a more general `withRequiredProp` ([#830](https://github.com/elastic/eui/pull/830))
 
+**Bug fixes**
+- `EuiComboBox` do not pass `isDisabled` prop to `EuiComboBoxOptionsList` to avoid "React does not reconize the 'isDisabled' prop on a DOM element" console warning ([#838](https://github.com/elastic/eui/pull/838))
+- `EuiComboBox` do not display clear icon when `isClearable` prop is set to false and `selectedOptions` prop is provided ([#838](https://github.com/elastic/eui/pull/838))
+
 ## [`0.0.47`](https://github.com/elastic/eui/tree/v0.0.47)
 
 - Added utility CSS classes for text and alignment concerns ([#774](https://github.com/elastic/eui/pull/774))
@@ -23,7 +27,7 @@
 - Made boolean matching in `EuiSearchBar` more exact so it doesn't match words starting with booleans, like "truest" or "offer" ([#776](https://github.com/elastic/eui/pull/776))
 - `EuiComboBox` do not setState or call refs once component is unmounted ([807](https://github.com/elastic/eui/pull/807) and [#813](https://github.com/elastic/eui/pull/813))
 - Added better accessibility labeling to `EuiPagination`, `EuiSideNav`, `EuiPopover`, `EuiBottomBar` and `EuiBasicTable`.  ([#821](https://github.com/elastic/eui/pull/821))
-- Added `isDisabled` to `EuiComboBox`  ([#829](https://github.com/elastic/eui/pull/829)) 
+- Added `isDisabled` to `EuiComboBox`  ([#829](https://github.com/elastic/eui/pull/829))
 
 ## [`0.0.46`](https://github.com/elastic/eui/tree/v0.0.46)
 

diff --git a/src-docs/src/views/combo_box/single_selection.js b/src-docs/src/views/combo_box/single_selection.js
@@ -32,7 +32,7 @@ export default class extends Component {
     }];
 
     this.state = {
-      selectedOptions: undefined,
+      selectedOptions: [this.options[2]],
     };
   }
 
@@ -48,10 +48,11 @@ export default class extends Component {
     return (
       <EuiComboBox
         placeholder="Select a single option"
-        singleSelection
+        singleSelection={true}
         options={this.options}
         selectedOptions={selectedOptions}
         onChange={this.onChange}
+        isClearable={false}
       />
     );
   }

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.js.snap b/src/components/combo_box/__snapshots__/combo_box.test.js.snap
@@ -28,3 +28,205 @@ exports[`EuiComboBox is rendered 1`] = `
   />
 </div>
 `;
+
+exports[`props isClearable is false with selectedOptions 1`] = `
+<div
+  aria-label="aria-label"
+  className="euiComboBox testClass1 testClass2"
+  data-test-subj="test subject string"
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+>
+  <EuiComboBoxInput
+    autoSizeInputRef={[Function]}
+    hasSelectedOptions={true}
+    inputRef={[Function]}
+    isListOpen={false}
+    onChange={[Function]}
+    onClick={[Function]}
+    onClose={[Function]}
+    onFocus={[Function]}
+    onOpen={[Function]}
+    onRemoveOption={[Function]}
+    searchValue=""
+    selectedOptions={
+      Array [
+        Object {
+          "label": "Mimas",
+        },
+        Object {
+          "label": "Iapetus",
+        },
+      ]
+    }
+    singleSelection={false}
+    updatePosition={[Function]}
+    value="Mimas, Iapetus"
+  />
+</div>
+`;
+
+exports[`props isClearable is false without selectedOptions 1`] = `
+<div
+  aria-label="aria-label"
+  className="euiComboBox testClass1 testClass2"
+  data-test-subj="test subject string"
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+>
+  <EuiComboBoxInput
+    autoSizeInputRef={[Function]}
+    hasSelectedOptions={false}
+    inputRef={[Function]}
+    isListOpen={false}
+    onChange={[Function]}
+    onClick={[Function]}
+    onClose={[Function]}
+    onFocus={[Function]}
+    onOpen={[Function]}
+    onRemoveOption={[Function]}
+    searchValue=""
+    selectedOptions={Array []}
+    singleSelection={false}
+    updatePosition={[Function]}
+    value=""
+  />
+</div>
+`;
+
+exports[`props isDisabled 1`] = `
+<div
+  aria-label="aria-label"
+  className="euiComboBox testClass1 testClass2 euiComboBox-isDisabled"
+  data-test-subj="test subject string"
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+>
+  <EuiComboBoxInput
+    autoSizeInputRef={[Function]}
+    hasSelectedOptions={true}
+    inputRef={[Function]}
+    isDisabled={true}
+    isListOpen={false}
+    onChange={[Function]}
+    onClick={[Function]}
+    onClose={[Function]}
+    onFocus={[Function]}
+    onOpen={[Function]}
+    onRemoveOption={[Function]}
+    searchValue=""
+    selectedOptions={
+      Array [
+        Object {
+          "label": "Mimas",
+        },
+      ]
+    }
+    singleSelection={false}
+    updatePosition={[Function]}
+    value="Mimas"
+  />
+</div>
+`;
+
+exports[`props options 1`] = `
+<div
+  aria-label="aria-label"
+  className="euiComboBox testClass1 testClass2"
+  data-test-subj="test subject string"
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+>
+  <EuiComboBoxInput
+    autoSizeInputRef={[Function]}
+    hasSelectedOptions={false}
+    inputRef={[Function]}
+    isListOpen={false}
+    onChange={[Function]}
+    onClear={[Function]}
+    onClick={[Function]}
+    onClose={[Function]}
+    onFocus={[Function]}
+    onOpen={[Function]}
+    onRemoveOption={[Function]}
+    searchValue=""
+    selectedOptions={Array []}
+    singleSelection={false}
+    updatePosition={[Function]}
+    value=""
+  />
+</div>
+`;
+
+exports[`props selectedOptions 1`] = `
+<div
+  aria-label="aria-label"
+  className="euiComboBox testClass1 testClass2"
+  data-test-subj="test subject string"
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+>
+  <EuiComboBoxInput
+    autoSizeInputRef={[Function]}
+    hasSelectedOptions={true}
+    inputRef={[Function]}
+    isListOpen={false}
+    onChange={[Function]}
+    onClear={[Function]}
+    onClick={[Function]}
+    onClose={[Function]}
+    onFocus={[Function]}
+    onOpen={[Function]}
+    onRemoveOption={[Function]}
+    searchValue=""
+    selectedOptions={
+      Array [
+        Object {
+          "label": "Mimas",
+        },
+        Object {
+          "label": "Iapetus",
+        },
+      ]
+    }
+    singleSelection={false}
+    updatePosition={[Function]}
+    value="Mimas, Iapetus"
+  />
+</div>
+`;
+
+exports[`props singleSelection 1`] = `
+<div
+  aria-label="aria-label"
+  className="euiComboBox testClass1 testClass2"
+  data-test-subj="test subject string"
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+>
+  <EuiComboBoxInput
+    autoSizeInputRef={[Function]}
+    hasSelectedOptions={true}
+    inputRef={[Function]}
+    isListOpen={false}
+    onChange={[Function]}
+    onClear={[Function]}
+    onClick={[Function]}
+    onClose={[Function]}
+    onFocus={[Function]}
+    onOpen={[Function]}
+    onRemoveOption={[Function]}
+    searchValue=""
+    selectedOptions={
+      Array [
+        Object {
+          "label": "Mimas",
+        },
+      ]
+    }
+    singleSelection={true}
+    updatePosition={[Function]}
+    value="Mimas"
+  />
+</div>
+`;
diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js
@@ -434,14 +434,6 @@ export class EuiComboBox extends Component {
     }
   };
 
-  onClear = () => {
-    if (this.props.isClearable && this.clearSelectedOptions && !this.props.isDisabled) {
-      return this.clearSelectedOptions();
-    } else {
-      return undefined;
-    }
-  }
-
   autoSizeInputRef = node => {
     this.autoSizeInput = node;
   };
@@ -524,7 +516,7 @@ export class EuiComboBox extends Component {
       async, // eslint-disable-line no-unused-vars
       isInvalid,
       rowHeight,
-      isClearable, // eslint-disable-line no-unused-vars
+      isClearable,
       ...rest
     } = this.props;
 
@@ -563,7 +555,6 @@ export class EuiComboBox extends Component {
             scrollToIndex={activeOptionIndex}
             onScroll={this.focusActiveOption}
             rowHeight={rowHeight}
-            isDisabled={isDisabled}
           />
         </EuiPortal>
       );
@@ -590,7 +581,7 @@ export class EuiComboBox extends Component {
           autoSizeInputRef={this.autoSizeInputRef}
           inputRef={this.searchInputRef}
           updatePosition={this.updateListPosition}
-          onClear={this.onClear}
+          onClear={isClearable && !isDisabled ? this.clearSelectedOptions : undefined}
           hasSelectedOptions={selectedOptions.length > 0}
           isListOpen={isListOpen}
           onOpen={this.openList}