Support hiding the options list and only allowing the user to add cus…

…tom input.

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]],
     };
   }

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: [{

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

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]],
     };
   }

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]],
     };
   }

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>
 `;

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

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