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();
+ });
+});