From e18218a933fc93eecda8c479928df827f0fefcf6 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Tue, 27 Mar 2018 22:46:10 -0700
Subject: [PATCH] Support hiding the options list and only allowing the user to
 add custom input.

---
 src-docs/src/views/combo_box/combo_box.js     |  1 -
 .../src/views/combo_box/combo_box_example.js  | 21 +++++++++
 .../views/combo_box/custom_options_only.js    | 43 +++++++++++++++++++
 .../combo_box/disallow_custom_options.js      |  1 -
 src-docs/src/views/combo_box/groups.js        |  1 -
 .../__snapshots__/combo_box.test.js.snap      | 16 -------
 src/components/combo_box/combo_box.js         | 38 +++++++++-------
 src/components/combo_box/combo_box.test.js    |  7 +--
 8 files changed, 88 insertions(+), 40 deletions(-)
 create mode 100644 src-docs/src/views/combo_box/custom_options_only.js

diff --git a/src-docs/src/views/combo_box/combo_box.js b/src-docs/src/views/combo_box/combo_box.js
index 70d4fe1b95d0..7a9582062efa 100644
--- a/src-docs/src/views/combo_box/combo_box.js
+++ b/src-docs/src/views/combo_box/combo_box.js
@@ -42,7 +42,6 @@ export default class extends Component {
     }];
 
     this.state = {
-      isPopoverOpen: false,
       selectedOptions: [this.options[2], this.options[4]],
     };
   }
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 3a143ac804a3..de2751528284 100644
--- a/src-docs/src/views/combo_box/combo_box_example.js
+++ b/src-docs/src/views/combo_box/combo_box_example.js
@@ -23,6 +23,10 @@ import DisallowCustomOptions from './disallow_custom_options';
 const disallowCustomOptionsSource = require('!!raw-loader!./disallow_custom_options');
 const disallowCustomOptionsHtml = renderToHtml(DisallowCustomOptions);
 
+import CustomOptionsOnly from './custom_options_only';
+const customOptionsOnlySource = require('!!raw-loader!./custom_options_only');
+const customOptionsOnlyHtml = renderToHtml(CustomOptionsOnly);
+
 import Async from './async';
 const asyncSource = require('!!raw-loader!./async');
 const asyncHtml = renderToHtml(Async);
@@ -79,6 +83,23 @@ export const ComboBoxExample = {
     ),
     props: { EuiComboBox },
     demo: <DisallowCustomOptions />,
+  }, {
+    title: 'Hiding suggestions',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: customOptionsOnlySource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: customOptionsOnlyHtml,
+    }],
+    text: (
+      <p>
+        Alternatively, leave out the <EuiCode>onChange</EuiCode> prop to hide the suggestions list
+        and <em>only</em> allow the creation of custom options.
+      </p>
+    ),
+    props: { EuiComboBox },
+    demo: <CustomOptionsOnly />,
   }, {
     title: 'Async',
     source: [{
diff --git a/src-docs/src/views/combo_box/custom_options_only.js b/src-docs/src/views/combo_box/custom_options_only.js
new file mode 100644
index 000000000000..f1d6f262b97f
--- /dev/null
+++ b/src-docs/src/views/combo_box/custom_options_only.js
@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+
+import {
+  EuiComboBox,
+} from '../../../../src/components';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      selectedOptions: [],
+    };
+  }
+
+  onCreateOption = (searchValue) => {
+    const normalizedSearchValue = searchValue.trim().toLowerCase();
+
+    if (!normalizedSearchValue) {
+      return;
+    }
+
+    const newOption = {
+      value: searchValue,
+      label: searchValue,
+    };
+
+    // Select the option.
+    this.setState(prevState => ({
+      selectedOptions: prevState.selectedOptions.concat(newOption),
+    }));
+  };
+
+  render() {
+    const { selectedOptions } = this.state;
+    return (
+      <EuiComboBox
+        selectedOptions={selectedOptions}
+        onCreateOption={this.onCreateOption}
+      />
+    );
+  }
+}
diff --git a/src-docs/src/views/combo_box/disallow_custom_options.js b/src-docs/src/views/combo_box/disallow_custom_options.js
index 2dfa08f7639e..5a6f6caa2a96 100644
--- a/src-docs/src/views/combo_box/disallow_custom_options.js
+++ b/src-docs/src/views/combo_box/disallow_custom_options.js
@@ -42,7 +42,6 @@ export default class extends Component {
     }];
 
     this.state = {
-      isPopoverOpen: false,
       selectedOptions: [this.options[2], this.options[4]],
     };
   }
diff --git a/src-docs/src/views/combo_box/groups.js b/src-docs/src/views/combo_box/groups.js
index 0030480ce26e..deb3b0b88b3b 100644
--- a/src-docs/src/views/combo_box/groups.js
+++ b/src-docs/src/views/combo_box/groups.js
@@ -45,7 +45,6 @@ export default class extends Component {
     this.options = [colorGroup, soundGroup];
 
     this.state = {
-      isPopoverOpen: false,
       selectedOptions: [colorGroup.options[2], soundGroup.options[3]],
     };
   }
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 02166b3faf7d..a332525cabde 100644
--- a/src/components/combo_box/__snapshots__/combo_box.test.js.snap
+++ b/src/components/combo_box/__snapshots__/combo_box.test.js.snap
@@ -47,21 +47,5 @@ exports[`EuiComboBox is rendered 1`] = `
       />
     </svg>
   </div>
-  <div
-    class="euiPanel euiComboBox__panel"
-    data-test-subj="comboBoxOptionsList"
-  >
-    <div
-      class="euiComboBox__rowWrap"
-    >
-      <div
-        class="euiText euiText--extraSmall euiComoboBox__empty"
-      >
-        <p>
-          There aren’t any options available
-        </p>
-      </div>
-    </div>
-  </div>
 </div>
 `;
diff --git a/src/components/combo_box/combo_box.js b/src/components/combo_box/combo_box.js
index a686141b9e4a..05cc0a586833 100644
--- a/src/components/combo_box/combo_box.js
+++ b/src/components/combo_box/combo_box.js
@@ -28,7 +28,7 @@ export class EuiComboBox extends Component {
     async: PropTypes.bool,
     options: PropTypes.array,
     selectedOptions: PropTypes.array,
-    onChange: PropTypes.func.isRequired,
+    onChange: PropTypes.func,
     onSearchChange: PropTypes.func,
     onCreateOption: PropTypes.func,
   }
@@ -384,6 +384,27 @@ export class EuiComboBox extends Component {
 
     const value = selectedOptions.map(selectedOption => selectedOption.label).join(', ');
 
+    let optionsList;
+
+    if (onChange) {
+      optionsList = (
+        <EuiComboBoxOptionsList
+          isLoading={isLoading}
+          options={options}
+          selectedOptions={selectedOptions}
+          onCreateOption={onCreateOption}
+          searchValue={searchValue}
+          matchingOptions={this.matchingOptions}
+          optionToGroupMap={this.optionToGroupMap}
+          optionRef={this.optionRef}
+          onOptionClick={this.onOptionClick}
+          onOptionEnterKey={this.onOptionEnterKey}
+          areAllOptionsSelected={this.areAllOptionsSelected()}
+          getSelectedOptionForSearchValue={getSelectedOptionForSearchValue}
+        />
+      );
+    }
+
     return (
       <div
         className={classes}
@@ -405,20 +426,7 @@ export class EuiComboBox extends Component {
           inputRef={this.searchInputRef}
         />
 
-        <EuiComboBoxOptionsList
-          isLoading={isLoading}
-          options={options}
-          selectedOptions={selectedOptions}
-          onCreateOption={onCreateOption}
-          searchValue={searchValue}
-          matchingOptions={this.matchingOptions}
-          optionToGroupMap={this.optionToGroupMap}
-          optionRef={this.optionRef}
-          onOptionClick={this.onOptionClick}
-          onOptionEnterKey={this.onOptionEnterKey}
-          areAllOptionsSelected={this.areAllOptionsSelected()}
-          getSelectedOptionForSearchValue={getSelectedOptionForSearchValue}
-        />
+        {optionsList}
       </div>
     );
   }
diff --git a/src/components/combo_box/combo_box.test.js b/src/components/combo_box/combo_box.test.js
index a707c38ae578..6a5d06efa8ad 100644
--- a/src/components/combo_box/combo_box.test.js
+++ b/src/components/combo_box/combo_box.test.js
@@ -7,12 +7,7 @@ import { EuiComboBox } from './combo_box';
 describe('EuiComboBox', () => {
   test('is rendered', () => {
     const component = render(
-      <EuiComboBox
-        {...requiredProps}
-        onChange={() => {}}
-        onSearchChange={() => {}}
-        onCreateOption={() => {}}
-      />
+      <EuiComboBox {...requiredProps} />
     );
 
     expect(component).toMatchSnapshot();