Merge pull request #382 from puppetlabs/development

Author: vine77

CHANGELOG.md

@@ -1,3 +1,7 @@
+# react-components 5.26.4 (2021-02-10)
+
+- [Select] Fix autocomplete select not staying open when typing (by [@jilliankeenan](https://github.com/jilliankeenan) in [#381](https://github.com/puppetlabs/design-system/pull/381))
+
 # react-components 5.26.3 (2021-01-29)
 
 - [Icon] Add inventory icon (by [@mardotio](https://github.com/mardotio) in [#379](https://github.com/puppetlabs/design-system/pull/379))

packages/react-components/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@puppet/react-components",
-  "version": "5.26.3",
+  "version": "5.26.4",
   "author": "Puppet, Inc.",
   "license": "Apache-2.0",
   "main": "build/library.js",

packages/react-components/package.json

@@ -20,6 +20,7 @@ import Icon from '../../library/icon';
 const propTypes = {
   id: PropTypes.string.isRequired,
   multiple: PropTypes.bool,
+  autocomplete: PropTypes.bool,
   showCancel: PropTypes.bool,
   options: PropTypes.arrayOf(
     PropTypes.shape({
@@ -49,6 +50,7 @@ const propTypes = {
 const defaultProps = {
   options: [],
   multiple: false,
+  autocomplete: false,
   showCancel: false,
   onBlur() {},
   className: '',
@@ -261,7 +263,7 @@ class OptionMenuList extends Component {
   }
 
   select(value) {
-    const { multiple, selected, onChange } = this.props;
+    const { multiple, selected, onChange, autocomplete, onEscape } = this.props;
 
     if (multiple) {
       const selectionSet = getSelectionSet(selected);
@@ -274,6 +276,9 @@ class OptionMenuList extends Component {
       onChange(Array.from(selectionSet));
     } else {
       onChange(value);
+      if (autocomplete) {
+        onEscape();
+      }
     }
   }
 
@@ -306,6 +311,7 @@ class OptionMenuList extends Component {
       options,
       selected,
       multiple,
+      autocomplete,
       showCancel,
       actionLabel,
       cancelLabel,

packages/react-components/source/react/internal/option-menu-list/OptionMenuList.js

@@ -192,7 +192,7 @@ class Select extends Component {
       this.setState({ focusedIndex: 0 });
     }
 
-    if (type !== MULTISELECT) {
+    if (type !== MULTISELECT && type !== AUTOCOMPLETE) {
       this.closeAndFocusButton();
     }
   }
@@ -455,6 +455,7 @@ class Select extends Component {
         <OptionMenuList
           id={`${name}-menu`}
           multiple={type === MULTISELECT}
+          autocomplete={type === AUTOCOMPLETE}
           showCancel={type === MULTISELECT && !applyImmediately}
           options={getOptions()}
           selected={listValue}