OUI combo box refine (opensearch-project#183)

* Added a prop clearOnBlur Signed-off-by: AbhishekReddy1127 <[email protected]> * Added example for prop clearOnBlur Signed-off-by: AbhishekReddy1127 <[email protected]> --------- Signed-off-by: AbhishekReddy1127 <[email protected]>
AMoo-Miki · Jul 2, 2023 · 17f257f · 17f257f
1 parent 9c8248d
commit 17f257f
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 1 deletion.
diff --git a/src-docs/src/views/combo_box/clear_on_blur.js b/src-docs/src/views/combo_box/clear_on_blur.js
@@ -0,0 +1,93 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React, { useState } from 'react';
+
+import { OuiComboBox } from '../../../../src/components';
+
+export default () => {
+  const [options, updateOptions] = useState([
+    {
+      label: 'Titan',
+      'data-test-subj': 'titanOption',
+    },
+    {
+      label: 'Enceladus is disabled',
+    },
+    {
+      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',
+    },
+  ]);
+
+  const [selectedOptions, setSelected] = useState([options[2], options[4]]);
+
+  const onChange = (selectedOptions) => {
+    setSelected(selectedOptions);
+  };
+
+  const 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
+    ) {
+      updateOptions([...options, newOption]);
+    }
+
+    // Select the option.
+    setSelected((prevSelected) => [...prevSelected, newOption]);
+  };
+
+  return (
+    <OuiComboBox
+      placeholder="Select or create options"
+      options={options}
+      selectedOptions={selectedOptions}
+      onChange={onChange}
+      onCreateOption={onCreateOption}
+      isClearable={true}
+      clearOnBlur={true}
+    />
+  );
+};
diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js
@@ -39,6 +39,7 @@ const comboBoxSnippet = `<OuiComboBox
   onChange={onChange}
   onCreateOption={onCreateOption}
   isClearable={true}
+  clearOnBlur={true}
 />`;
 
 import Containers from './containers';
@@ -206,6 +207,17 @@ const duplicateOptionsSnippet = `const options = [{
   key: 'Label2',
 }]`;
 
+import ClearOnBlur from './clear_on_blur';
+const clearOnBlurSource = require('!!raw-loader!./clear_on_blur');
+const clearOnBlurSourceOptionsHtml = renderToHtml(ClearOnBlur);
+const clearOnBlurSnippet = `<OuiComboBox
+  placeholder="Select one or more options"
+  options={options}
+  onChange={onChange}
+  onSearchChange={onSearchChange}
+  clearOnBlur={true}
+/>`;
+
 export const ComboBoxExample = {
   title: 'Combo box',
   intro: (
@@ -600,5 +612,27 @@ export const ComboBoxExample = {
       demo: <DuplicateOptions />,
       snippet: duplicateOptionsSnippet,
     },
+    {
+      title: 'Clear on blur',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: clearOnBlurSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: clearOnBlurSourceOptionsHtml,
+        },
+      ],
+      text: (
+        <p>
+          Set the prop <OuiCode>clearOnBlur</OuiCode> to make the combo box
+          input text clear when user focuses out of text box.
+        </p>
+      ),
+      props: { OuiComboBox, OuiComboBoxOptionOption },
+      snippet: clearOnBlurSnippet,
+      demo: <ClearOnBlur />,
+    },
   ],
 };
diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
@@ -166,6 +166,10 @@ export interface _OuiComboBoxProps<T>
    * Specifies that the input should have focus when the component loads
    */
   autoFocus?: boolean;
+  /**
+   * When `true` clears the input text when user focus out of the input box
+   */
+  clearOnBlur?: boolean;
 }
 
 /**
@@ -466,10 +470,20 @@ export class OuiComboBox<T> extends Component<
       options,
       selectedOptions,
       singleSelection,
+      clearOnBlur,
     } = this.props;
-
     const { matchingOptions } = this.state;
 
+    const { hasFocus, isListOpen } = this.state;
+    if (
+      clearOnBlur &&
+      searchValue &&
+      (hasFocus === false || isListOpen === false)
+    ) {
+      this.clearSearchValue();
+      return;
+    }
+
     if (this.doesSearchMatchOnlyOption()) {
       this.onAddOption(matchingOptions[0], isContainerBlur);
       return;