diff --git a/CHANGELOG.md b/CHANGELOG.md index 5156fd31ab9..e6ab2522a4e 100644 --- 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 index e178b63040a..18275954aec 100644 --- 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 ( ); } diff --git a/src/components/combo_box/__snapshots__/combo_box.test.js.snap b/src/components/combo_box/__snapshots__/combo_box.test.js.snap index 89c5941cc22..5285fbbb094 100644 --- 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`] = ` /> `; + +exports[`props isClearable is false with selectedOptions 1`] = ` +
+ +
+`; + +exports[`props isClearable is false without selectedOptions 1`] = ` +
+ +
+`; + +exports[`props isDisabled 1`] = ` +
+ +
+`; + +exports[`props options 1`] = ` +
+ +
+`; + +exports[`props selectedOptions 1`] = ` +
+ +
+`; + +exports[`props singleSelection 1`] = ` +
+ +
+`; diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js index 3e1faa2d24c..9342d2c50c9 100644 --- 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} /> ); @@ -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} diff --git a/src/components/combo_box/combo_box.test.js b/src/components/combo_box/combo_box.test.js index e2afb397a4e..f1a0c3cc5d4 100644 --- a/src/components/combo_box/combo_box.test.js +++ b/src/components/combo_box/combo_box.test.js @@ -4,6 +4,29 @@ import { requiredProps } from '../../test'; import { EuiComboBox } from './combo_box'; +const options = [{ + label: 'Titan', + 'data-test-subj': 'titanOption', +}, { + label: 'Enceladus', +}, { + label: 'Mimas', +}, { + label: 'Dione', +}, { + label: 'Iapetus', +}, { + label: 'Phoebe', +}, { + label: 'Rhea', +}, { + label: 'Pandora is one of Saturn\'s moons, named for a Titaness of Greek mythology', +}, { + label: 'Tethys', +}, { + label: 'Hyperion', +}]; + describe('EuiComboBox', () => { test('is rendered', () => { const component = shallow( @@ -13,3 +36,81 @@ describe('EuiComboBox', () => { expect(component).toMatchSnapshot(); }); }); + +describe('props', () => { + test('options', () => { + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); + + test('selectedOptions', () => { + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); + + describe('isClearable is false', () => { + test('without selectedOptions', () => { + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); + + test('with selectedOptions', () => { + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); + }); + + test('singleSelection', () => { + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); + + test('isDisabled', () => { + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); +});