[EuiComboBox] Clean duplicated values before adding them (#8335)

Co-authored-by: Tomasz Kajtoch <[email protected]>

packages/eui/changelogs/upcoming/8335.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiComboBox` by cleaning duplicated values when having a delimiter prop.

packages/eui/src/components/combo_box/combo_box.spec.tsx

@@ -36,6 +36,7 @@ describe('EuiComboBox', () => {
     const onChange = (selectedOptions: typeof options) => {
       setSelected(selectedOptions);
     };
+
     return (
       <EuiComboBox
         options={options}
@@ -46,6 +47,28 @@ describe('EuiComboBox', () => {
     );
   };
 
+  const CreateComboBox = () => {
+    const [options, setOptions] = useState([]);
+    const [selectedOptions, setSelected] = useState([]);
+
+    const onCreateOption = (searchValue: string) => {
+      const newOption = { label: searchValue };
+
+      setOptions([...options, newOption]);
+
+      setSelected((prevSelected) => [...prevSelected, newOption]);
+    };
+
+    return (
+      <EuiComboBox
+        options={options}
+        selectedOptions={selectedOptions}
+        onCreateOption={onCreateOption}
+        delimiter=","
+      />
+    );
+  };
+
   describe('focus management', () => {
     it('keeps focus on the input box when clicking a disabled item', () => {
       cy.realMount(
@@ -410,6 +433,25 @@ describe('EuiComboBox', () => {
           'Item 1'
         );
       });
+
+      it('adds only one item when pasting duplicated elements', () => {
+        cy.realMount(<CreateComboBox />);
+        cy.get('[data-test-subj="euiComboBoxPill"]').should('not.exist');
+
+        cy.get('[data-test-subj="comboBoxSearchInput"]').click();
+
+        // Simulate pasting text
+        cy.get('[data-test-subj="comboBoxSearchInput"]')
+          .clear()
+          .invoke('val', 'a, a,  a,   a')
+          .trigger('input');
+        cy.get('[data-test-subj="comboBoxSearchInput"]').type(' {backspace}');
+
+        cy.realPress('Enter');
+
+        cy.get('[data-test-subj="euiComboBoxPill"]').should('have.length', 1);
+        cy.get('[data-test-subj="euiComboBoxPill"]').should('have.text', 'a');
+      });
     });
 
     describe('single selection', () => {

packages/eui/src/components/combo_box/combo_box.test.tsx

@@ -516,6 +516,26 @@ describe('EuiComboBox', () => {
 
             expect(onCreateOptionHandler).not.toHaveBeenCalled();
           });
+
+          it('fires the callback only once when adding duplicated values', () => {
+            const onCreateOptionHandler = jest.fn();
+
+            const { getByTestSubject } = render(
+              <EuiComboBox
+                delimiter=","
+                options={options}
+                selectedOptions={[options[2]]}
+                onCreateOption={onCreateOptionHandler}
+              />
+            );
+            const input = getByTestSubject('comboBoxSearchInput');
+
+            fireEvent.change(input, { target: { value: 'a, a,  a,   a' } });
+            fireEvent.keyDown(input, { key: 'Enter' });
+
+            expect(onCreateOptionHandler).toHaveBeenCalledTimes(1);
+            expect(onCreateOptionHandler).toHaveBeenCalledWith('a', options);
+          });
         });
       });
 

packages/eui/src/components/combo_box/combo_box.tsx

@@ -460,7 +460,10 @@ export class EuiComboBox<T> extends Component<
     const { searchValue } = this.state;
     const { delimiter } = this.props;
     if (delimiter) {
-      searchValue.split(delimiter).forEach((option: string) => {
+      const trimmed = searchValue.split(delimiter).map((value) => value.trim());
+      const values = [...new Set([...trimmed])];
+
+      values.forEach((option: string) => {
         if (option.length > 0) this.addCustomOption(isContainerBlur, option);
       });
     } else {