Support disallowing custom options.

generator-eui/documentation/templates/documentation_page.js

@@ -31,7 +31,7 @@ export const <%= componentExampleName %>Example = {
         Description needed: how to use the <EuiCode>Eui<%= componentExampleName %></EuiCode> component.
       </p>
     ),
-    components: { <%= componentName %> },
+    props: { <%= componentName %> },
     demo: <<%= componentExampleName %> />,
   }],
 };

src-docs/src/views/combo_box/combo_box_example.js

@@ -19,6 +19,10 @@ import Groups from './groups';
 const groupsSource = require('!!raw-loader!./groups');
 const groupsHtml = renderToHtml(Groups);
 
+import DisallowCustomOptions from './disallow_custom_options';
+const disallowCustomOptionsSource = require('!!raw-loader!./disallow_custom_options');
+const disallowCustomOptionsHtml = renderToHtml(DisallowCustomOptions);
+
 export const ComboBoxExample = {
   title: 'Combo Box',
   sections: [{
@@ -37,7 +41,7 @@ export const ComboBoxExample = {
         a custom value in addition to selecting from a predetermined list.
       </p>
     ),
-    components: { EuiComboBox },
+    props: { EuiComboBox },
     demo: <ComboBox />,
   }, {
     title: 'Groups',
@@ -53,7 +57,23 @@ export const ComboBoxExample = {
         You can group options together. The groups <em>won&rsquo;t</em> match against the search value.
       </p>
     ),
-    components: { EuiComboBox },
+    props: { EuiComboBox },
     demo: <Groups />,
+  }, {
+    title: 'Disallowing custom options',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: disallowCustomOptionsSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: disallowCustomOptionsHtml,
+    }],
+    text: (
+      <p>
+        Leave out the <EuiCode>onCreateOption</EuiCode> prop to disallow the creation of custom options.
+      </p>
+    ),
+    props: { EuiComboBox },
+    demo: <DisallowCustomOptions />,
   }],
 };

src-docs/src/views/combo_box/disallow_custom_options.js

@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+
+import {
+  EuiComboBox,
+} from '../../../../src/components';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.options = [{
+      value: 'titan',
+      label: 'Titan',
+      'data-test-subj': 'titanOption',
+    }, {
+      value: 'enceladus',
+      label: 'Enceladus',
+    }, {
+      value: 'mimas',
+      label: 'Mimas',
+    }, {
+      value: 'dione',
+      label: 'Dione',
+    }, {
+      value: 'iapetus',
+      label: 'Iapetus',
+    }, {
+      value: 'phoebe',
+      label: 'Phoebe',
+    }, {
+      value: 'rhea',
+      label: 'Rhea',
+    }, {
+      value: 'pandora',
+      label: 'Pandora is one of Saturn\'s moons, named for a Titaness of Greek mythology',
+    }, {
+      value: 'tethys',
+      label: 'Tethys',
+    }, {
+      value: 'hyperion',
+      label: 'Hyperion',
+    }];
+
+    this.state = {
+      searchValue: '',
+      isPopoverOpen: false,
+      selectedOptions: [this.options[2], this.options[4]],
+    };
+  }
+
+  onChange = (selectedOptions) => {
+    this.setState({
+      searchValue: '',
+      selectedOptions,
+    });
+  };
+
+  onSearchChange = (searchValue) => {
+    this.setState({
+      searchValue,
+    });
+  };
+
+  render() {
+    const { searchValue, selectedOptions } = this.state;
+    return (
+      <EuiComboBox
+        options={this.options}
+        selectedOptions={selectedOptions}
+        onChange={this.onChange}
+        onSearchChange={this.onSearchChange}
+        searchValue={searchValue}
+      />
+    );
+  }
+}

src-docs/src/views/combo_box/groups.js

@@ -52,7 +52,6 @@ export default class extends Component {
   }
 
   onChange = (selectedOptions) => {
-    // TODO: Encapsulate searchValue within the combo box.
     this.setState({
       searchValue: '',
       selectedOptions,

src/components/combo_box/combo_box.js

@@ -78,7 +78,7 @@ export class EuiComboBox extends Component {
     searchValue: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
     onSearchChange: PropTypes.func.isRequired,
-    onCreateOption: PropTypes.func.isRequired,
+    onCreateOption: PropTypes.func,
   }
 
   static defaultProps = {
@@ -214,6 +214,10 @@ export class EuiComboBox extends Component {
         break;
 
       case comboBoxKeyCodes.ENTER:
+        if (!this.props.onCreateOption) {
+          return;
+        }
+
         // Don't create the value if it's already been selected.
         if (getSelectedOptionForSearchValue(this.props.searchValue, this.props.selectedOptions)) {
           return;
@@ -401,7 +405,7 @@ export class EuiComboBox extends Component {
   }
 
   renderList() {
-    const { options, searchValue } = this.props;
+    const { options, searchValue, onCreateOption } = this.props;
     const { matchingOptions, optionToGroupMap } = this.state;
 
     let emptyStateContent;
@@ -411,15 +415,21 @@ export class EuiComboBox extends Component {
     } else if (this.areAllOptionsSelected()) {
       emptyStateContent = <p>You&rsquo;ve selected all available options</p>;
     } else if (matchingOptions.length === 0) {
-      const selectedOptionForValue = getSelectedOptionForSearchValue(searchValue, this.props.selectedOptions);
-      if (selectedOptionForValue) {
-        // Disallow duplicate custom options.
-        emptyStateContent = (
-          <p><strong>{selectedOptionForValue.value}</strong> has already been added</p>
-        );
+      if (onCreateOption) {
+        const selectedOptionForValue = getSelectedOptionForSearchValue(searchValue, this.props.selectedOptions);
+        if (selectedOptionForValue) {
+          // Disallow duplicate custom options.
+          emptyStateContent = (
+            <p><strong>{selectedOptionForValue.value}</strong> has already been added</p>
+          );
+        } else {
+          emptyStateContent = (
+            <p>Hit <EuiCode>ENTER</EuiCode> to add <strong>{searchValue}</strong> as a custom option</p>
+          );
+        }
       } else {
         emptyStateContent = (
-          <p>Hit <EuiCode>ENTER</EuiCode> to add <strong>{searchValue}</strong> as a custom option</p>
+          <p><strong>{searchValue}</strong> doesn&rsquo;t match any options</p>
         );
       }
     }