From 4111a917fb707aeac945cf9f53542b5cba40f01c Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Tue, 17 Mar 2020 17:01:10 +0530 Subject: [PATCH 01/18] added delimenator prop --- src-docs/src/views/combo_box/combo_box.js | 1 + src/components/combo_box/combo_box.tsx | 27 +++++++++++++++++++---- 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/src-docs/src/views/combo_box/combo_box.js b/src-docs/src/views/combo_box/combo_box.js index 973334206d4..bac86f8762b 100644 --- a/src-docs/src/views/combo_box/combo_box.js +++ b/src-docs/src/views/combo_box/combo_box.js @@ -88,6 +88,7 @@ export default class extends Component { * `string` | `ReactElement` or an array of these */ append?: EuiFormControlLayoutProps['append']; + delimiter?: string; } /** @@ -393,7 +394,7 @@ export class EuiComboBox extends Component< } }; - addCustomOption = (isContainerBlur: boolean) => { + addCustomOption = (isContainerBlur: boolean, searchValue: string) => { const { onCreateOption, options, @@ -401,7 +402,7 @@ export class EuiComboBox extends Component< singleSelection, } = this.props; - const { searchValue, matchingOptions } = this.state; + const { matchingOptions } = this.state; if (this.doesSearchMatchOnlyOption()) { this.onAddOption(matchingOptions[0], isContainerBlur); @@ -524,7 +525,15 @@ export class EuiComboBox extends Component< // If the user tabs away or changes focus to another element, take whatever input they've // typed and convert it into a pill, to prevent the combo box from looking like a text input. if (!this.hasActiveOption()) { - this.addCustomOption(true); + const { searchValue } = this.state; + const { delimiter } = this.props; + if (delimiter) { + searchValue + .split(delimiter) + .forEach((option: string) => this.addCustomOption(true, option)); + } else { + this.addCustomOption(true, searchValue); + } } } }; @@ -565,11 +574,20 @@ export class EuiComboBox extends Component< event.preventDefault(); event.stopPropagation(); if (this.hasActiveOption()) { + console.log(this.state.matchingOptions[this.state.activeOptionIndex]); this.onAddOption( this.state.matchingOptions[this.state.activeOptionIndex] ); } else { - this.addCustomOption(false); + const { searchValue } = this.state; + const { delimiter } = this.props; + if (delimiter) { + searchValue + .split(delimiter) + .forEach((option: string) => this.addCustomOption(false, option)); + } else { + this.addCustomOption(false, searchValue); + } } break; @@ -702,6 +720,7 @@ export class EuiComboBox extends Component< EuiComboBoxInputProps['onChange'] > = searchValue => { const { onSearchChange } = this.props; + if (onSearchChange) { const hasMatchingOptions = this.state.matchingOptions.length > 0; onSearchChange(searchValue, hasMatchingOptions); From ac1f76d35c5b483ca445849292ae6a0164905d36 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Tue, 17 Mar 2020 17:10:07 +0530 Subject: [PATCH 02/18] Entering delimeator hits enter functionality added --- src/components/combo_box/combo_box.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx index 22edd4b18cb..505df4cc845 100644 --- a/src/components/combo_box/combo_box.tsx +++ b/src/components/combo_box/combo_box.tsx @@ -719,7 +719,7 @@ export class EuiComboBox extends Component< onSearchChange: NonNullable< EuiComboBoxInputProps['onChange'] > = searchValue => { - const { onSearchChange } = this.props; + const { onSearchChange, delimiter } = this.props; if (onSearchChange) { const hasMatchingOptions = this.state.matchingOptions.length > 0; @@ -729,6 +729,9 @@ export class EuiComboBox extends Component< this.setState({ searchValue }, () => { if (searchValue && this.state.isListOpen === false) this.openList(); }); + if (delimiter && searchValue.endsWith(delimiter)) { + this.addCustomOption(false, searchValue.split(delimiter)[0]); + } }; componentDidMount() { From fb452c2fee6ebf90fa2323af626e362c90414b00 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 19 Mar 2020 22:54:15 +0530 Subject: [PATCH 03/18] added docs example, CL --- CHANGELOG.md | 1 + src-docs/src/views/combo_box/combo_box.js | 1 - .../views/combo_box/combo_box_delimiter.js | 97 +++++++++++++++++++ .../src/views/combo_box/combo_box_example.js | 25 +++++ 4 files changed, 123 insertions(+), 1 deletion(-) create mode 100644 src-docs/src/views/combo_box/combo_box_delimiter.js diff --git a/CHANGELOG.md b/CHANGELOG.md index fe5fd37ca4c..8893a8491ba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Added `delimiter` prop to `EuiComboBox` ([#3104](https://github.com/elastic/eui/pull/3104)) - Updated `EuiFilterSelect` to retain the order of its filters ([#3063](https://github.com/elastic/eui/pull/3063)) - Added `href` prop to `EuiBadge` ([#3009](https://github.com/elastic/eui/pull/3009)) - Added props descriptions for `EuiComboBox` ([#3007](https://github.com/elastic/eui/pull/3007)) diff --git a/src-docs/src/views/combo_box/combo_box.js b/src-docs/src/views/combo_box/combo_box.js index bac86f8762b..973334206d4 100644 --- a/src-docs/src/views/combo_box/combo_box.js +++ b/src-docs/src/views/combo_box/combo_box.js @@ -88,7 +88,6 @@ export default class extends Component { { + this.setState({ + selectedOptions, + }); + }; + + onCreateOption = (searchValue, flattenedOptions) => { + const normalizedSearchValue = searchValue.trim().toLowerCase(); + + if (!normalizedSearchValue) { + return; + } + + const newOption = { + label: searchValue, + }; + + // Create the option if it doesn't exist. + if ( + flattenedOptions.findIndex( + option => option.label.trim().toLowerCase() === normalizedSearchValue + ) === -1 + ) { + this.options.push(newOption); + } + + // Select the option. + this.setState(prevState => ({ + selectedOptions: prevState.selectedOptions.concat(newOption), + })); + }; + + render() { + const { selectedOptions } = this.state; + return ( + + ); + } +} diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js index a3479d6ff26..366c76a3fef 100644 --- a/src-docs/src/views/combo_box/combo_box_example.js +++ b/src-docs/src/views/combo_box/combo_box_example.js @@ -59,6 +59,10 @@ import Disabled from './disabled'; const disabledSource = require('!!raw-loader!./disabled'); const disabledHtml = renderToHtml(Disabled); +import Delimiter from './combo_box_delimiter'; +const delimiterSource = require('!!raw-loader!./combo_box_delimiter'); +const delimiterHtml = renderToHtml(Delimiter); + export const ComboBoxExample = { title: 'Combo Box', intro: ( @@ -347,5 +351,26 @@ export const ComboBoxExample = { props: { EuiComboBox }, demo: , }, + { + title: 'With delimiter', + source: [ + { + type: GuideSectionTypes.JS, + code: delimiterSource, + }, + { + type: GuideSectionTypes.HTML, + code: delimiterHtml, + }, + ], + text: ( +

+ Use the delimiter prop to trigger an entry creation + in EuiComboBox . +

+ ), + props: { EuiComboBox }, + demo: , + }, ], }; From 386acbb0c2b2704d3a626747b36b5de820b7c010 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 19 Mar 2020 23:06:27 +0530 Subject: [PATCH 04/18] prettified --- src-docs/src/views/combo_box/combo_box_example.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js index 58982dfc77b..e240360dc93 100644 --- a/src-docs/src/views/combo_box/combo_box_example.js +++ b/src-docs/src/views/combo_box/combo_box_example.js @@ -364,14 +364,19 @@ export const ComboBoxExample = { }, { type: GuideSectionTypes.HTML, - code: delimiterHtml, }, - ], text: ( -

Use the delimiter prop to trigger an entry creation + code: delimiterHtml, + }, + ], + text: ( +

+ {' '} + Use the delimiter prop to trigger an entry creation in EuiComboBox .

), props: { EuiComboBox }, - demo: ,}, + demo: , + }, { title: 'Sorting matches', source: [ From a133ba658b6d98ff96aed34cc121fa3bd8a0f6b5 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 19 Mar 2020 23:09:50 +0530 Subject: [PATCH 05/18] removed console.log() --- src/components/combo_box/combo_box.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx index 17d3e6b1540..2817adf9c56 100644 --- a/src/components/combo_box/combo_box.tsx +++ b/src/components/combo_box/combo_box.tsx @@ -581,7 +581,6 @@ export class EuiComboBox extends Component< event.preventDefault(); event.stopPropagation(); if (this.hasActiveOption()) { - console.log(this.state.matchingOptions[this.state.activeOptionIndex]); this.onAddOption( this.state.matchingOptions[this.state.activeOptionIndex] ); From c3142a4d1494d825f458b55944b9ffa6d3a1314e Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 19 Mar 2020 23:58:08 +0530 Subject: [PATCH 06/18] added copy functionality --- .../views/combo_box/combo_box_delimiter.js | 1 + .../src/views/combo_box/combo_box_example.js | 1 - .../__snapshots__/combo_box.test.tsx.snap | 8 ++++++++ src/components/combo_box/combo_box.tsx | 20 +++++++++++++++++-- 4 files changed, 27 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/combo_box/combo_box_delimiter.js b/src-docs/src/views/combo_box/combo_box_delimiter.js index 3bc601cfd1e..ed7f6496387 100644 --- a/src-docs/src/views/combo_box/combo_box_delimiter.js +++ b/src-docs/src/views/combo_box/combo_box_delimiter.js @@ -86,6 +86,7 @@ export default class extends Component { placeholder="Select or create options" options={this.options} delimiter="," + noSuggestions selectedOptions={selectedOptions} onChange={this.onChange} onCreateOption={this.onCreateOption} diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js index e240360dc93..7b6f6590eef 100644 --- a/src-docs/src/views/combo_box/combo_box_example.js +++ b/src-docs/src/views/combo_box/combo_box_example.js @@ -369,7 +369,6 @@ export const ComboBoxExample = { ], text: (

- {' '} Use the delimiter prop to trigger an entry creation in EuiComboBox .

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap index b4138517cf4..6c7d788b7ec 100644 --- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap +++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap @@ -59,6 +59,7 @@ exports[`EuiComboBox is rendered 1`] = ` exports[`props full width is rendered 1`] = `
= Pick< EuiComboBoxOptionsListProps, @@ -844,6 +846,17 @@ export class EuiComboBox extends Component< this._isMounted = false; } + renderCopyIcon = () => { + const { delimiter, selectedOptions } = this.props; + const text = selectedOptions.map(object => object.label).join(delimiter); + + return ( + + {copy => } + + ); + }; + render() { const { 'data-test-subj': dataTestSubj, @@ -869,8 +882,8 @@ export class EuiComboBox extends Component< selectedOptions, singleSelection, prepend, - append, sortMatchesBy, + delimiter, ...rest } = this.props; const { @@ -923,6 +936,9 @@ export class EuiComboBox extends Component< .map(selectedOption => selectedOption.label) .join(', '); + let append = singleSelection ? this.props.append : undefined; + if (delimiter) append = this.renderCopyIcon(); + let optionsList; if (!noSuggestions && isListOpen) { @@ -1015,7 +1031,7 @@ export class EuiComboBox extends Component< toggleButtonRef={this.toggleButtonRefCallback} updatePosition={this.updatePosition} value={value} - append={singleSelection ? append : undefined} + append={append as EuiFormControlLayoutProps['append']} prepend={singleSelection ? prepend : undefined} /> {optionsList} From 5d2cb23530518a2f460ad366571d263448cdae0b Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 20 Mar 2020 00:02:58 +0530 Subject: [PATCH 07/18] added test,snap --- .../__snapshots__/combo_box.test.tsx.snap | 52 +++++++++++++++++++ src/components/combo_box/combo_box.test.tsx | 12 +++++ 2 files changed, 64 insertions(+) diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap index 6c7d788b7ec..e359796288e 100644 --- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap +++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap @@ -57,6 +57,58 @@ exports[`EuiComboBox is rendered 1`] = `
`; +exports[`props delimiter is rendered 1`] = ` +
+ + [Function] + + } + autoSizeInputRef={[Function]} + compressed={false} + fullWidth={false} + hasSelectedOptions={true} + inputRef={[Function]} + isListOpen={false} + noIcon={false} + onChange={[Function]} + onClear={[Function]} + onClick={[Function]} + onCloseListClick={[Function]} + onFocus={[Function]} + onOpenListClick={[Function]} + onRemoveOption={[Function]} + rootId={[Function]} + searchValue="" + selectedOptions={ + Array [ + Object { + "label": "Mimas", + }, + Object { + "label": "Dione", + }, + ] + } + singleSelection={false} + toggleButtonRef={[Function]} + updatePosition={[Function]} + value="Mimas, Dione" + /> +
+`; + exports[`props full width is rendered 1`] = `
{ expect(component).toMatchSnapshot(); }); + + test('delimiter is rendered', () => { + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); }); describe('behavior', () => { From e0a58bf928049d63487a3f16fca808cb52be30fe Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 20 Mar 2020 17:31:03 +0530 Subject: [PATCH 08/18] removed copy button --- .../__snapshots__/combo_box.test.tsx.snap | 17 ----------------- src/components/combo_box/combo_box.tsx | 17 ++--------------- 2 files changed, 2 insertions(+), 32 deletions(-) diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap index e359796288e..1fbb44b9711 100644 --- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap +++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap @@ -59,7 +59,6 @@ exports[`EuiComboBox is rendered 1`] = ` exports[`props delimiter is rendered 1`] = `
- [Function] - - } autoSizeInputRef={[Function]} compressed={false} fullWidth={false} @@ -111,7 +102,6 @@ exports[`props delimiter is rendered 1`] = ` exports[`props full width is rendered 1`] = `
extends Component< this._isMounted = false; } - renderCopyIcon = () => { - const { delimiter, selectedOptions } = this.props; - const text = selectedOptions.map(object => object.label).join(delimiter); - - return ( - - {copy => } - - ); - }; - render() { const { 'data-test-subj': dataTestSubj, @@ -884,6 +873,7 @@ export class EuiComboBox extends Component< prepend, sortMatchesBy, delimiter, + append, ...rest } = this.props; const { @@ -936,9 +926,6 @@ export class EuiComboBox extends Component< .map(selectedOption => selectedOption.label) .join(', '); - let append = singleSelection ? this.props.append : undefined; - if (delimiter) append = this.renderCopyIcon(); - let optionsList; if (!noSuggestions && isListOpen) { @@ -1031,7 +1018,7 @@ export class EuiComboBox extends Component< toggleButtonRef={this.toggleButtonRefCallback} updatePosition={this.updatePosition} value={value} - append={append as EuiFormControlLayoutProps['append']} + append={singleSelection ? append : undefined} prepend={singleSelection ? prepend : undefined} /> {optionsList} From e89727ac58f711c0aac93cd4009233b4052e7feb Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 20 Mar 2020 17:32:16 +0530 Subject: [PATCH 09/18] removed copy button --- src/components/combo_box/combo_box.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx index c324b9a4d5d..ac61ec5e3be 100644 --- a/src/components/combo_box/combo_box.tsx +++ b/src/components/combo_box/combo_box.tsx @@ -44,8 +44,6 @@ import { EuiFilterSelectItem } from '../filter_group'; import AutosizeInput from 'react-input-autosize'; import { CommonProps } from '../common'; import { EuiFormControlLayoutProps } from '../form'; -import { EuiIcon } from '../icon'; -import { EuiCopy } from '../copy'; type DrillProps = Pick< EuiComboBoxOptionsListProps, From ae3ae85c16d3fd315884ec2662156eee952ef3d9 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Sat, 21 Mar 2020 03:23:50 +0530 Subject: [PATCH 10/18] Update src-docs/src/views/combo_box/combo_box_example.js Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src-docs/src/views/combo_box/combo_box_example.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js index 7b6f6590eef..2bfea7044c7 100644 --- a/src-docs/src/views/combo_box/combo_box_example.js +++ b/src-docs/src/views/combo_box/combo_box_example.js @@ -369,8 +369,9 @@ export const ComboBoxExample = { ], text: (

- Use the delimiter prop to trigger an entry creation - in EuiComboBox . + Pass a unique character to the delimiter prop to aid in option creation. + This is best used when knowing that content may be pasted from elsewhere such as + a comma separated list.

), props: { EuiComboBox }, From 864f5a9e5bd383ad8bcd6662220d5d1e4ac7c080 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Sat, 21 Mar 2020 03:24:04 +0530 Subject: [PATCH 11/18] Update src/components/combo_box/combo_box.tsx Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src/components/combo_box/combo_box.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx index ac61ec5e3be..e636f9dfd31 100644 --- a/src/components/combo_box/combo_box.tsx +++ b/src/components/combo_box/combo_box.tsx @@ -126,6 +126,9 @@ interface _EuiComboBoxProps * `string` | `ReactElement` or an array of these */ append?: EuiFormControlLayoutProps['append']; + /** + * A special character to use as a value separator. Typically a comma `,` + */ delimiter?: string; } From ff3131ad0ed9cdb6b39575f414d34d034b72073d Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Sat, 21 Mar 2020 12:39:31 +0530 Subject: [PATCH 12/18] fixed only first gets entered --- src-docs/src/views/combo_box/combo_box_delimiter.js | 1 - src/components/combo_box/combo_box.tsx | 4 +++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/combo_box/combo_box_delimiter.js b/src-docs/src/views/combo_box/combo_box_delimiter.js index ed7f6496387..3bc601cfd1e 100644 --- a/src-docs/src/views/combo_box/combo_box_delimiter.js +++ b/src-docs/src/views/combo_box/combo_box_delimiter.js @@ -86,7 +86,6 @@ export default class extends Component { placeholder="Select or create options" options={this.options} delimiter="," - noSuggestions selectedOptions={selectedOptions} onChange={this.onChange} onCreateOption={this.onCreateOption} diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx index ac61ec5e3be..5dfb5650ae0 100644 --- a/src/components/combo_box/combo_box.tsx +++ b/src/components/combo_box/combo_box.tsx @@ -736,7 +736,9 @@ export class EuiComboBox extends Component< if (searchValue && this.state.isListOpen === false) this.openList(); }); if (delimiter && searchValue.endsWith(delimiter)) { - this.addCustomOption(false, searchValue.split(delimiter)[0]); + searchValue.split(delimiter).forEach(value => { + this.addCustomOption(false, value); + }); } }; From 0c08b72f1e3dfae65bab0ecf9cd4c1451f6912c7 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Wed, 25 Mar 2020 12:42:09 +0530 Subject: [PATCH 13/18] updated text --- src/components/combo_box/combo_box.tsx | 1 + .../combo_box_options_list.tsx | 33 +++++++++++++------ 2 files changed, 24 insertions(+), 10 deletions(-) diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx index 7f25deba868..4f79655ecd2 100644 --- a/src/components/combo_box/combo_box.tsx +++ b/src/components/combo_box/combo_box.tsx @@ -963,6 +963,7 @@ export class EuiComboBox extends Component< selectedOptions={selectedOptions} updatePosition={this.updatePosition} width={width} + delimiter={delimiter} /> ); diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx index 04967ce18b0..466e9ab4527 100644 --- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx +++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx @@ -76,6 +76,7 @@ export type EuiComboBoxOptionsListProps = CommonProps & updatePosition: UpdatePositionHandler; width: number; singleSelection?: boolean | EuiComboBoxSingleSelectionShape; + delimiter?: string; }; export class EuiComboBoxOptionsList extends Component< @@ -179,9 +180,9 @@ export class EuiComboBoxOptionsList extends Component< singleSelection, updatePosition, width, + delimiter, ...rest } = this.props; - let emptyStateContent; if (isLoading) { @@ -232,15 +233,27 @@ export class EuiComboBoxOptionsList extends Component< ); } } else { - emptyStateContent = ( -

- {searchValue} }} - /> -

- ); + if (delimiter && searchValue.includes(delimiter)) { + emptyStateContent = ( +

+ {delimiter} }} + /> +

+ ); + } else { + emptyStateContent = ( +

+ {searchValue} }} + /> +

+ ); + } } } else if (!options.length) { emptyStateContent = ( From 033499a6fcc5f59607ebb823f807d4a861b599ee Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Wed, 25 Mar 2020 12:45:18 +0530 Subject: [PATCH 14/18] indent fix --- src-docs/src/views/combo_box/combo_box_example.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js index 2bfea7044c7..556924d3ae6 100644 --- a/src-docs/src/views/combo_box/combo_box_example.js +++ b/src-docs/src/views/combo_box/combo_box_example.js @@ -369,9 +369,9 @@ export const ComboBoxExample = { ], text: (

- Pass a unique character to the delimiter prop to aid in option creation. - This is best used when knowing that content may be pasted from elsewhere such as - a comma separated list. + Pass a unique character to the delimiter prop to + aid in option creation. This is best used when knowing that content + may be pasted from elsewhere such as a comma separated list.

), props: { EuiComboBox }, From e983a61174a08b2ea81e69e3e1bbf2457a57bec8 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Wed, 25 Mar 2020 12:49:07 +0530 Subject: [PATCH 15/18] Update combo_box_options_list.tsx --- .../combo_box/combo_box_options_list/combo_box_options_list.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx index 466e9ab4527..401f04487e5 100644 --- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx +++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx @@ -183,6 +183,7 @@ export class EuiComboBoxOptionsList extends Component< delimiter, ...rest } = this.props; + let emptyStateContent; if (isLoading) { From 5eeff79682fb04518f939096ceb9687ab7c57992 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Wed, 25 Mar 2020 19:45:30 +0530 Subject: [PATCH 16/18] Update src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com> --- .../combo_box/combo_box_options_list/combo_box_options_list.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx index 401f04487e5..8d230a1e82b 100644 --- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx +++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx @@ -238,7 +238,7 @@ export class EuiComboBoxOptionsList extends Component< emptyStateContent = (

{delimiter} }} /> From bcd13cd1b093ea68e127cf0240630db8a554962e Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Wed, 25 Mar 2020 21:22:47 +0530 Subject: [PATCH 17/18] removed empty string --- src/components/combo_box/combo_box.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx index 4f79655ecd2..75d92ca538c 100644 --- a/src/components/combo_box/combo_box.tsx +++ b/src/components/combo_box/combo_box.tsx @@ -538,9 +538,9 @@ export class EuiComboBox extends Component< const { searchValue } = this.state; const { delimiter } = this.props; if (delimiter) { - searchValue - .split(delimiter) - .forEach((option: string) => this.addCustomOption(true, option)); + searchValue.split(delimiter).forEach((option: string) => { + if (option.length > 0) this.addCustomOption(true, option); + }); } else { this.addCustomOption(true, searchValue); } @@ -591,9 +591,9 @@ export class EuiComboBox extends Component< const { searchValue } = this.state; const { delimiter } = this.props; if (delimiter) { - searchValue - .split(delimiter) - .forEach((option: string) => this.addCustomOption(false, option)); + searchValue.split(delimiter).forEach((option: string) => { + if (option.length > 0) this.addCustomOption(false, option); + }); } else { this.addCustomOption(false, searchValue); } @@ -740,7 +740,7 @@ export class EuiComboBox extends Component< }); if (delimiter && searchValue.endsWith(delimiter)) { searchValue.split(delimiter).forEach(value => { - this.addCustomOption(false, value); + if (value.length > 0) this.addCustomOption(false, value); }); } }; From 14ad8436ce45bc163a8d7d0864a4fc8c75b7434d Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Wed, 25 Mar 2020 21:48:52 +0530 Subject: [PATCH 18/18] removed redundant code --- src/components/combo_box/combo_box.tsx | 32 +++++++++++--------------- 1 file changed, 14 insertions(+), 18 deletions(-) diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx index 75d92ca538c..7c84e40a528 100644 --- a/src/components/combo_box/combo_box.tsx +++ b/src/components/combo_box/combo_box.tsx @@ -501,6 +501,18 @@ export class EuiComboBox extends Component< this.setState({ hasFocus: true }); }; + setCustomOptions = (isContainerBlur: boolean) => { + const { searchValue } = this.state; + const { delimiter } = this.props; + if (delimiter) { + searchValue.split(delimiter).forEach((option: string) => { + if (option.length > 0) this.addCustomOption(true, option); + }); + } else { + this.addCustomOption(isContainerBlur, searchValue); + } + }; + onContainerBlur: EventListener = event => { // close the options list, unless the use clicked on an option @@ -535,15 +547,7 @@ export class EuiComboBox extends Component< // If the user tabs away or changes focus to another element, take whatever input they've // typed and convert it into a pill, to prevent the combo box from looking like a text input. if (!this.hasActiveOption()) { - const { searchValue } = this.state; - const { delimiter } = this.props; - if (delimiter) { - searchValue.split(delimiter).forEach((option: string) => { - if (option.length > 0) this.addCustomOption(true, option); - }); - } else { - this.addCustomOption(true, searchValue); - } + this.setCustomOptions(true); } } }; @@ -588,15 +592,7 @@ export class EuiComboBox extends Component< this.state.matchingOptions[this.state.activeOptionIndex] ); } else { - const { searchValue } = this.state; - const { delimiter } = this.props; - if (delimiter) { - searchValue.split(delimiter).forEach((option: string) => { - if (option.length > 0) this.addCustomOption(false, option); - }); - } else { - this.addCustomOption(false, searchValue); - } + this.setCustomOptions(false); } break;