@carbon/react 1.78.1 → 1.78.2

package/es/components/UIShell/HeaderMenu.js

@@ -10,12 +10,12 @@ import { ChevronDown } from '@carbon/icons-react';
 import cx from 'classnames';
 import React__default from 'react';
 import PropTypes from 'prop-types';
-import { Enter, Space, Escape } from '../../internal/keyboard/keys.js';
-import { matches } from '../../internal/keyboard/match.js';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { composeEventHandlers } from '../../tools/events.js';
+import { matches } from '../../internal/keyboard/match.js';
+import { Enter, Space, Escape } from '../../internal/keyboard/keys.js';
 
 /**
  * `HeaderMenu` is used to render submenu's in the `Header`. Most often children

package/es/components/UIShell/HeaderPanel.js

@@ -10,10 +10,10 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useRef, useState } from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { Escape } from '../../internal/keyboard/keys.js';
-import { match } from '../../internal/keyboard/match.js';
 import { useWindowEvent } from '../../internal/useEvent.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
+import { match } from '../../internal/keyboard/match.js';
+import { Escape } from '../../internal/keyboard/keys.js';
 
 const noopFn = () => {};
 const HeaderPanel = /*#__PURE__*/React__default.forwardRef(function HeaderPanel(_ref, ref) {

package/es/components/UIShell/SideNav.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/UIShell/SideNav.js

@@ -12,13 +12,13 @@ import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { CARBON_SIDENAV_ITEMS } from './_utils.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { Tab, Escape } from '../../internal/keyboard/keys.js';
-import { match } from '../../internal/keyboard/match.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { useWindowEvent } from '../../internal/useEvent.js';
 import { useDelayedState } from '../../internal/useDelayedState.js';
 import { breakpoints } from '@carbon/layout';
 import { useMatchMedia } from '../../internal/useMatchMedia.js';
+import { match } from '../../internal/keyboard/match.js';
+import { Tab, Escape } from '../../internal/keyboard/keys.js';
 
 // TO-DO: comment back in when footer is added for rails
 // import SideNavFooter from './SideNavFooter';

package/es/components/UIShell/SideNavHeader.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -20,7 +20,8 @@ export interface SideNavHeaderProps {
      */
     isSideNavExpanded?: boolean;
     /**
-     * A component used to render an icon.
+     * Provide an icon to render in the header of the side navigation. Should be
+     * a React class.
      */
     renderIcon: React.ComponentType;
 }

package/es/components/UIShell/SideNavHeader.js

@@ -39,7 +39,8 @@ SideNavHeader.propTypes = {
    */
   isSideNavExpanded: PropTypes.bool,
   /**
-   * A component used to render an icon.
+   * Provide an icon to render in the header of the side navigation. Should be
+   * a React class.
    */
   // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired

package/es/components/UIShell/SideNavLink.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -37,7 +37,7 @@ export type SideNavLinkProps<E extends ElementType> = LinkProps<E> & {
      */
     large?: boolean;
     /**
-     * A component used to render an icon.
+     * Provide an icon to render in the side navigation link. Should be a React class.
      */
     renderIcon?: ComponentType;
     /**

package/es/components/UIShell/SideNavLink.js

@@ -69,7 +69,7 @@ SideNavLink.propTypes = {
    */
   large: PropTypes.bool,
   /**
-   * A component used to render an icon.
+   * Provide an icon to render in the side navigation link. Should be a React class.
    */
   // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

package/es/components/UIShell/SideNavMenu.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -27,7 +27,7 @@ export interface SideNavMenuProps {
      */
     large?: boolean;
     /**
-     * A component used to render an icon.
+     * A custom icon to render next to the SideNavMenu title. This can be a function returning JSX or JSX itself.
      */
     renderIcon?: React.ComponentType;
     /**

package/es/components/UIShell/SideNavMenu.js

@@ -10,10 +10,10 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useContext, useState } from 'react';
 import SideNavIcon from './SideNavIcon.js';
-import { Escape } from '../../internal/keyboard/keys.js';
-import { match } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { SideNavContext } from './SideNav.js';
+import { match } from '../../internal/keyboard/match.js';
+import { Escape } from '../../internal/keyboard/keys.js';
 
 var _ChevronDown;
 const SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(_ref, ref) {
@@ -110,7 +110,7 @@ SideNavMenu.propTypes = {
    */
   large: PropTypes.bool,
   /**
-   * A component used to render an icon.
+   * Pass in a custom icon to render next to the `SideNavMenu` title
    */
   // @ts-expect-error - PropTypes are unable to cover this case.
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

package/es/components/UIShell/SwitcherItem.js

@@ -11,9 +11,9 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { Link } from './Link.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
-import { match } from '../../internal/keyboard/match.js';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
+import { match } from '../../internal/keyboard/match.js';
+import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
 
 const SwitcherItem = /*#__PURE__*/forwardRef(function SwitcherItem(props, forwardRef) {
   const {

package/es/internal/FloatingMenu.js

@@ -9,13 +9,13 @@ import React__default, { useContext, useState, useRef, useCallback, useEffect, c
 import * as FeatureFlags from '@carbon/feature-flags';
 import ReactDOM from 'react-dom';
 import window from 'window-or-global';
-import { Tab } from './keyboard/keys.js';
-import { match } from './keyboard/match.js';
+import OptimizedResize from './OptimizedResize.js';
 import { selectorTabbable, selectorFocusable } from './keyboard/navigation.js';
-import { OptimizedResize } from './OptimizedResize.js';
 import { PrefixContext } from './usePrefix.js';
 import { warning } from './warning.js';
 import wrapFocus, { wrapFocusWithoutSentinels } from './wrapFocus.js';
+import { match } from './keyboard/match.js';
+import { Tab } from './keyboard/keys.js';
 
 const DIRECTION_LEFT = 'left';
 const DIRECTION_TOP = 'top';
@@ -205,7 +205,7 @@ const FloatingMenu = _ref2 => {
       updateMenuPosition();
     });
     return () => {
-      resizeHandler.remove();
+      resizeHandler.release();
     };
   }, [triggerRef, menuOffset, menuDirection, flipped, target, updateOrientation]);
 

package/es/internal/OptimizedResize.js

@@ -8,42 +8,44 @@
 import window from 'window-or-global';
 
 // mdn resize function
-
-/**
- * A callback function to be executed on `resize`.
- */
-
-const OptimizedResize = (() => {
+const OptimizedResize = function optimizedResize() {
   const callbacks = [];
   let running = false;
-  const runCallbacks = () => {
+
+  // run the actual callbacks
+  function runCallbacks() {
     callbacks.forEach(callback => {
       callback();
     });
     running = false;
-  };
-  const handleResize = () => {
+  }
+
+  // fired on resize event
+  function resize() {
     if (!running) {
       running = true;
       window.requestAnimationFrame(runCallbacks);
     }
-  };
-  const addCallback = callback => {
-    const index = callbacks.indexOf(callback);
-    if (index < 0) {
-      callbacks.push(callback);
+  }
+
+  // adds callback to loop
+  function addCallback(callback) {
+    if (callback) {
+      const index = callbacks.indexOf(callback);
+      if (index < 0) {
+        callbacks.push(callback);
+      }
     }
-  };
+  }
   return {
-    /** Adds a callback function to be executed on window `resize`. */
+    // public method to add additional callback
     add: callback => {
       if (!callbacks.length) {
-        window.addEventListener('resize', handleResize);
+        window.addEventListener('resize', resize);
       }
       addCallback(callback);
       return {
-        /** Removes the callback. */
-        remove: () => {
+        release() {
           const index = callbacks.indexOf(callback);
           if (index >= 0) {
             callbacks.splice(index, 1);
@@ -52,6 +54,7 @@ const OptimizedResize = (() => {
       };
     }
   };
-})();
+}();
+var OptimizedResize$1 = OptimizedResize;
 
-export { OptimizedResize };
+export { OptimizedResize$1 as default };

package/es/internal/focus/index.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+function focus(elementOrRef) {
+  const element = elementOrRef.current || elementOrRef;
+  if (element && element.focus && document.activeElement !== element) {
+    element.focus();
+  }
+}
+
+export { focus };

package/es/internal/keyboard/keys.js

@@ -69,8 +69,8 @@ const ArrowDown = {
 };
 const Delete = {
   key: 'Delete',
-  which: 8,
-  keyCode: 8,
+  which: 8 ,
+  keyCode: 8 ,
   code: 'ArrowDecimal'
 };
 

package/es/internal/keyboard/match.js

@@ -5,38 +5,65 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/**
+ * @typedef Key
+ * @property key {Array<string>|string}
+ * @property which {number}
+ * @property keyCode {number}
+ */
+
 /**
  * Check to see if at least one key code matches the key code of the
  * given event.
  *
- * @param event - The event to test.
- * @param keysToMatch - An array of key definitions to match against.
- * @returns `true` if one of the keys matches.
+ * @example
+ * import * as keys from '../keys';
+ * import { matches } from '../match';
+ *
+ * function handleOnKeyDown(event) {
+ *   if (matches(event, [keys.Enter, keys.Space]) {
+ *     // ...
+ *   }
+ * }
+ *
+ * @param {Event|React.SyntheticEvent} event
+ * @param {Array<Key>} keysToMatch
+ * @returns {boolean}
  */
-const matches = (event, keysToMatch) => {
+function matches(event, keysToMatch) {
   for (let i = 0; i < keysToMatch.length; i++) {
     if (match(event, keysToMatch[i])) {
       return true;
     }
   }
   return false;
-};
+}
 
 /**
  * Check to see if the given key matches the corresponding keyboard event. Also
- * supports passing in the value directly if you can't use the given event.
+ * supports passing in the value directly if you can't used the given event.
+ *
+ * @example
+ * import * as keys from '../keys';
+ * import { matches } from '../match';
+ *
+ * function handleOnKeyDown(event) {
+ *   if (match(event, keys.Enter) {
+ *     // ...
+ *   }
+ * }
  *
- * @param eventOrCode - A `KeyboardEvent`, a number, or a string value.
- * @param keyObj - An object with key properties to match against.
- * @returns `true` if the event or code matches the key definition.
+ * @param {React.SyntheticEvent|Event|number|string} eventOrCode
+ * @param {Key} key
+ * @returns {boolean}
  */
-const match = (eventOrCode, _ref) => {
+function match(eventOrCode) {
   let {
     key,
     which,
     keyCode,
     code
-  } = _ref;
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   if (typeof eventOrCode === 'string') {
     return eventOrCode === key;
   }
@@ -44,12 +71,9 @@ const match = (eventOrCode, _ref) => {
     return eventOrCode === which || eventOrCode === keyCode;
   }
   if (eventOrCode.key && Array.isArray(key)) {
-    return key.includes(eventOrCode.key);
+    return key.indexOf(eventOrCode.key) !== -1;
   }
-  return eventOrCode.key === key ||
-  // TODO: When can these checks for deprecated properties be deleted?
-  // Presumably, the `Key` type should also be pruned of these properties.
-  eventOrCode.which === which || eventOrCode.keyCode === keyCode || eventOrCode.code === code;
-};
+  return eventOrCode.key === key || eventOrCode.which === which || eventOrCode.keyCode === keyCode || eventOrCode.code === code;
+}
 
 export { match, matches };

package/es/internal/keyboard/navigation.js

@@ -9,16 +9,21 @@ import { ArrowRight, ArrowLeft } from './keys.js';
 import { match } from './match.js';
 
 /**
- * A "ring buffer" function that takes an array and, depending on an ArrowRight
- * or ArrowLeft key input, loops from last index to first or first index to last.
+ * Various utilities to help with a11y work
+ */
+
+/**
+ * A "ring buffer" function that takes an array and depending on an ArrowRight
+ * or ArrowLeft key input loops from last index to first or first index to last.
  *
- * @param key - the left or right arrow key (KeyboardEvent, number, or string)
- * @param index - the current index in the array
- * @param arrayLength - the total length of the array
+ * @param {string} key - the left or right arrow keys
+ * @param {number} index - the current index in a given array
+ * @param {number} arrayLength - the total length of the array
  *
  * @example
- *  getNextIndex(keyCodes.RIGHT, 0, 4)
+ * 	getNextIndex(keyCodes.RIGHT, 0, 4)
  */
+
 const getNextIndex = (key, index, arrayLength) => {
   if (match(key, ArrowRight)) {
     return (index + 1) % arrayLength;
@@ -26,23 +31,30 @@ const getNextIndex = (key, index, arrayLength) => {
   if (match(key, ArrowLeft)) {
     return (index + arrayLength - 1) % arrayLength;
   }
-  return;
 };
 
 /**
- * A flag `node.compareDocumentPosition(target)` returns that indicates
- * `target` is located earlier than `node` in the document or `target` contains `node`.
+ * A flag `node.compareDocumentPosition(target)` returns,
+ * that indicates `target` is located earlier than `node` in the document or `target` contains `node`.
  */
-const DOCUMENT_POSITION_BROAD_PRECEDING = typeof Node !== 'undefined' ? Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS : 0;
+const DOCUMENT_POSITION_BROAD_PRECEDING =
+// Checks `typeof Node` for `react-docgen`
+typeof Node !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
 
 /**
- * A flag `node.compareDocumentPosition(target)` returns that indicates
- * `target` is located later than `node` in the document or `node` contains `target`.
+ * A flag `node.compareDocumentPosition(target)` returns,
+ * that indicates `target` is located later than `node` in the document or `node` contains `target`.
  */
-const DOCUMENT_POSITION_BROAD_FOLLOWING = typeof Node !== 'undefined' ? Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY : 0;
+const DOCUMENT_POSITION_BROAD_FOLLOWING =
+// Checks `typeof Node` for `react-docgen`
+typeof Node !== 'undefined' &&
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
 
 /**
- * CSS selector that selects major nodes that are sequentially focusable.
+ * CSS selector that selects major nodes that are sequential-focusable.
  */
 const selectorTabbable = `
   a[href], area[href], input:not([disabled]):not([tabindex='-1']),
@@ -52,7 +64,7 @@ const selectorTabbable = `
 `;
 
 /**
- * CSS selector that selects major nodes that are click focusable.
+ * CSS selector that selects major nodes that are click focusable
  */
 const selectorFocusable = `
   a[href], area[href], input:not([disabled]),

package/es/internal/useMergedRefs.js

@@ -7,9 +7,6 @@
 
 import { useCallback } from 'react';
 
-// TODO: Investigate updating this hook based on the following code from
-// https://github.com/carbon-design-system/carbon/pull/18611:
-// https://github.com/adamalston/carbon/blob/dd403b6b10de3d8a6ccd8d2e21174c908c1e890a/packages/react/src/components/ListBox/ListBoxMenuItem.tsx#L23-L46
 /**
  * Combine multiple refs into a single ref. This use useful when you have two
  * refs from both `React.forwardRef` and `useRef` that you would like to add to

package/lib/components/Accordion/AccordionItem.js

@@ -15,13 +15,13 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 require('../Text/index.js');
-var keys = require('../../internal/keyboard/keys.js');
-var match = require('../../internal/keyboard/match.js');
 var useId = require('../../internal/useId.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var AccordionProvider = require('./AccordionProvider.js');
+var match = require('../../internal/keyboard/match.js');
 var Text = require('../Text/Text.js');
+var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/Button/Button.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2025
+ * Copyright IBM Corp. 2016, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -50,7 +50,8 @@ export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      */
     rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
     /**
-     * A component used to render an icon.
+     * Optional prop to allow overriding the icon rendering.
+     * Can be a React component class
      */
     renderIcon?: React.ElementType;
     /**

package/lib/components/Button/Button.js

@@ -203,7 +203,8 @@ Button.propTypes = {
    */
   rel: PropTypes__default["default"].string,
   /**
-   * A component used to render an icon.
+   * Optional prop to allow overriding the icon rendering.
+   * Can be a React component class
    */
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**

package/lib/components/Button/ButtonBase.js

@@ -58,7 +58,7 @@ const ButtonBase = /*#__PURE__*/React__default["default"].forwardRef(function Bu
     [`${prefix}--btn--${kind}`]: kind,
     [`${prefix}--btn--disabled`]: disabled,
     [`${prefix}--btn--expressive`]: isExpressive,
-    [`${prefix}--btn--icon-only`]: hasIconOnly,
+    [`${prefix}--btn--icon-only`]: hasIconOnly && !className?.includes(`${prefix}--btn--icon-only`),
     [`${prefix}--btn--selected`]: hasIconOnly && isSelected && kind === 'ghost'
   });
   const commonProps = {

package/lib/components/ChatButton/ChatButton.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2024, 2025
+ * Copyright IBM Corp. 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -33,7 +33,8 @@ export interface ChatButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      */
     kind?: ChatButtonKind;
     /**
-     * A component used to render an icon.
+     * Optional prop to specify an icon to be rendered.
+     * Can be a React component class
      */
     renderIcon?: ComponentType | FunctionComponent;
     /**

package/lib/components/ChatButton/ChatButton.js

@@ -85,7 +85,8 @@ ChatButton.propTypes = {
    */
   kind: PropTypes__default["default"].oneOf(['primary', 'secondary', 'danger', 'ghost', 'tertiary']),
   /**
-   * A component used to render an icon.
+   * Optional prop to specify an icon to be rendered.
+   * Can be a React component class
    */
   // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),

package/lib/components/ComboBox/ComboBox.js

@@ -20,8 +20,6 @@ var isEqual = require('react-fast-compare');
 var index$1 = require('../ListBox/index.js');
 var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
 var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
-var keys = require('../../internal/keyboard/keys.js');
-var match = require('../../internal/keyboard/match.js');
 var useId = require('../../internal/useId.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -30,8 +28,10 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var react = require('@floating-ui/react');
 var index = require('../FeatureFlags/index.js');
+var match = require('../../internal/keyboard/match.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 var Text = require('../Text/Text.js');
+var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -312,41 +312,31 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
           return changes;
         }
       case InputKeyDownEnter:
-        if (!allowCustomValue) {
-          const highlightedIndex = indexToHighlight(inputValue);
-          const matchingItem = items[highlightedIndex];
-          if (matchingItem) {
-            // Prevent matching items that are marked as `disabled` from
-            // being selected.
-            if (matchingItem.disabled) {
-              return state;
-            }
-
-            // Select the matching item.
-            return {
-              ...changes,
-              selectedItem: matchingItem,
-              inputValue: itemToString(matchingItem)
-            };
-          }
-
-          // If no matching item is found and there is an existing
-          // selection, clear the selection.
-          if (state.selectedItem !== null) {
-            return {
-              ...changes,
-              selectedItem: null,
+        if (highlightedIndex === -1 && !allowCustomValue && state.selectedItem) {
+          return {
+            ...changes,
+            selectedItem: null,
+            inputValue: state.inputValue
+          };
+        }
+        if (allowCustomValue) {
+          setInputValue(inputValue);
+          setHighlightedIndex(changes.selectedItem);
+          if (onChange) {
+            onChange({
+              selectedItem: changes.selectedItem,
               inputValue
-            };
+            });
           }
+          return changes;
+        } else if (changes.selectedItem && !allowCustomValue) {
+          return changes;
+        } else {
+          return {
+            ...changes,
+            isOpen: true
+          };
         }
-
-        // For `allowCustomValue` or if no matching item is found, keep the
-        // menu open.
-        return {
-          ...changes,
-          isOpen: true
-        };
       case FunctionToggleMenu:
       case ToggleButtonClick:
         if (!changes.isOpen && state.inputValue && highlightedIndex === -1 && !allowCustomValue) {