From 635e0cbb37542f8ecc574b449e4250bd2442116b Mon Sep 17 00:00:00 2001
From: emyarod <emyarod@users.noreply.github.com>
Date: Mon, 22 Mar 2021 18:10:41 -0500
Subject: [PATCH] fix(Dropdown): prevent unnecessary duplicate VO readings
 (#7768)

* fix(ListBoxMenuItem): add title tooltip only when content overflows

* docs(ListBoxMenu): update children proptype

* docs(Dropdown): reduce item width

* chore: update snapshots

* fix(ListBoxMenuItem): add title tooltip only when content overflows

* refactor(ComboBox): convert to functional component to allow hooks

* fix(ListBoxMenuItem): forward ref for class based listbox components

* test(ListBox): update assertions for forwarded ref in listbox menu items

* chore: update snapshots

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../src/components/ComboBox/ComboBox-test.js  |  21 +-
 .../react/src/components/ComboBox/ComboBox.js | 900 +++++++++---------
 .../src/components/Dropdown/Dropdown-story.js |   3 +-
 .../src/components/Dropdown/Dropdown-test.js  |   5 +-
 .../react/src/components/Dropdown/Dropdown.js |  12 +-
 .../__snapshots__/Dropdown-test.js.snap       |  32 +-
 .../src/components/ListBox/ListBoxMenu.js     |   1 +
 .../src/components/ListBox/ListBoxMenuItem.js |  42 +-
 .../__snapshots__/ListBoxMenu-test.js.snap    |   4 +-
 .../ListBoxMenuItem-test.js.snap              |  12 +-
 .../__tests__/FilterableMultiSelect-test.js   |   4 +-
 .../MultiSelect/__tests__/MultiSelect-test.js |   2 +-
 12 files changed, 525 insertions(+), 513 deletions(-)

diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
index bacc66c3fb87..06b5ee247864 100644
--- a/packages/react/src/components/ComboBox/ComboBox-test.js
+++ b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -10,7 +10,6 @@ import { mount } from 'enzyme';
 import {
   findListBoxNode,
   findMenuNode,
-  findMenuItemNode,
   assertMenuOpen,
   assertMenuClosed,
   generateItems,
@@ -20,13 +19,7 @@ import ComboBox from '../ComboBox';
 import { settings } from 'carbon-components';
 
 const { prefix } = settings;
-
 const findInputNode = (wrapper) => wrapper.find(`.${prefix}--text-input`);
-const downshiftActions = {
-  setHighlightedIndex: jest.fn(),
-};
-const clearInput = (wrapper) =>
-  wrapper.instance().handleOnStateChange({ inputValue: '' }, downshiftActions);
 const openMenu = (wrapper) => {
   wrapper.find(`[role="combobox"]`).simulate('click');
 };
@@ -64,9 +57,8 @@ describe('ComboBox', () => {
     expect(mockProps.onChange).not.toHaveBeenCalled();
 
     for (let i = 0; i < mockProps.items.length; i++) {
-      clearInput(wrapper);
       openMenu(wrapper);
-      findMenuItemNode(wrapper, i).simulate('click');
+      wrapper.find('ForwardRef(ListBoxMenuItem)').at(i).simulate('click');
       expect(mockProps.onChange).toHaveBeenCalledTimes(i + 1);
       expect(mockProps.onChange).toHaveBeenCalledWith({
         selectedItem: mockProps.items[i],
@@ -100,7 +92,7 @@ describe('ComboBox', () => {
   it('should let the user select an option by clicking on the option node', () => {
     const wrapper = mount(<ComboBox {...mockProps} />);
     openMenu(wrapper);
-    findMenuItemNode(wrapper, 0).simulate('click');
+    wrapper.find('ForwardRef(ListBoxMenuItem)').at(0).simulate('click');
     expect(mockProps.onChange).toHaveBeenCalledTimes(1);
     expect(mockProps.onChange).toHaveBeenCalledWith({
       selectedItem: mockProps.items[0],
@@ -110,7 +102,7 @@ describe('ComboBox', () => {
     mockProps.onChange.mockClear();
 
     openMenu(wrapper);
-    findMenuItemNode(wrapper, 1).simulate('click');
+    wrapper.find('ForwardRef(ListBoxMenuItem)').at(1).simulate('click');
     expect(mockProps.onChange).toHaveBeenCalledTimes(1);
     expect(mockProps.onChange).toHaveBeenCalledWith({
       selectedItem: mockProps.items[1],
@@ -207,12 +199,7 @@ describe('ComboBox', () => {
 
     it('should set `inputValue` to an empty string if a falsey-y value is given', () => {
       const wrapper = mount(<ComboBox {...mockProps} />);
-
-      wrapper.instance().handleOnInputValueChange('foo', downshiftActions);
-      expect(wrapper.state('inputValue')).toBe('foo');
-
-      wrapper.instance().handleOnInputValueChange(null, downshiftActions);
-      expect(wrapper.state('inputValue')).toBe('');
+      expect(wrapper.find('input').instance().value).toBe('');
     });
   });
 });
diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
index e3ba0b2dd378..ab8a584a3600 100644
--- a/packages/react/src/components/ComboBox/ComboBox.js
+++ b/packages/react/src/components/ComboBox/ComboBox.js
@@ -8,7 +8,7 @@
 import cx from 'classnames';
 import Downshift from 'downshift';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { settings } from 'carbon-components';
 import {
   Checkmark16,
@@ -34,16 +34,21 @@ const defaultItemToString = (item) => {
 
 const defaultShouldFilterItem = () => true;
 
-const getInputValue = (props, state) => {
-  if (props.selectedItem) {
-    return props.itemToString(props.selectedItem);
+const getInputValue = ({
+  initialSelectedItem,
+  inputValue,
+  itemToString,
+  selectedItem,
+}) => {
+  if (selectedItem) {
+    return itemToString(selectedItem);
   }
   // TODO: consistent `initialSelectedItem` behavior with other listbox components in v11
-  if (props.initialSelectedItem) {
-    return props.itemToString(props.initialSelectedItem);
+  if (initialSelectedItem) {
+    return itemToString(initialSelectedItem);
   }
 
-  return state.inputValue || '';
+  return inputValue || '';
 };
 
 const findHighlightedIndex = ({ items, itemToString }, inputValue) => {
@@ -65,242 +70,103 @@ const findHighlightedIndex = ({ items, itemToString }, inputValue) => {
 
 const getInstanceId = setupGetInstanceId();
 
-export default class ComboBox extends React.Component {
-  static propTypes = {
-    /**
-     * 'aria-label' of the ListBox component.
-     */
-    ariaLabel: PropTypes.string,
-
-    /**
-     * An optional className to add to the container node
-     */
-    className: PropTypes.string,
-
-    /**
-     * Specify the direction of the combobox dropdown. Can be either top or bottom.
-     */
-    direction: PropTypes.oneOf(['top', 'bottom']),
-
-    /**
-     * Specify if the control should be disabled, or not
-     */
-    disabled: PropTypes.bool,
-
-    /**
-     * Additional props passed to Downshift
-     */
-    downshiftProps: PropTypes.shape(Downshift.propTypes),
-
-    /**
-     * Provide helper text that is used alongside the control label for
-     * additional help
-     */
-    helperText: PropTypes.string,
-
-    /**
-     * Specify a custom `id` for the input
-     */
-    id: PropTypes.string.isRequired,
-
-    /**
-     * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
-     * from their collection that are pre-selected
-     */
-    initialSelectedItem: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string,
-    ]),
-
-    /**
-     * Specify if the currently selected value is invalid.
-     */
-    invalid: PropTypes.bool,
-
-    /**
-     * Message which is displayed if the value is invalid.
-     */
-    invalidText: PropTypes.node,
-
-    /**
-     * Optional function to render items as custom components instead of strings.
-     * Defaults to null and is overriden by a getter
-     */
-    itemToElement: PropTypes.func,
-
-    /**
-     * Helper function passed to downshift that allows the library to render a
-     * given item to a string label. By default, it extracts the `label` field
-     * from a given item to serve as the item label in the list
-     */
-    itemToString: PropTypes.func,
-
-    /**
-     * We try to stay as generic as possible here to allow individuals to pass
-     * in a collection of whatever kind of data structure they prefer
-     */
-    items: PropTypes.array.isRequired,
-
-    /**
-     * should use "light theme" (white background)?
-     */
-    light: PropTypes.bool,
-
-    /**
-     * `onChange` is a utility for this controlled component to communicate to a
-     * consuming component when a specific dropdown item is selected.
-     * @param {{ selectedItem }}
-     */
-    onChange: PropTypes.func.isRequired,
-
-    /**
-     * Callback function to notify consumer when the text input changes.
-     * This provides support to change available items based on the text.
-     * @param {string} inputText
-     */
-    onInputChange: PropTypes.func,
-
-    /**
-     * Callback function that fires when the combobox menu toggle is clicked
-     * @param {MouseEvent} event
-     */
-    onToggleClick: PropTypes.func,
-
-    /**
-     * Used to provide a placeholder text node before a user enters any input.
-     * This is only present if the control has no items selected
-     */
-    placeholder: PropTypes.string.isRequired,
-
-    /**
-     * For full control of the selection
-     */
-    selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-
-    /**
-     * Specify your own filtering logic by passing in a `shouldFilterItem`
-     * function that takes in the current input and an item and passes back
-     * whether or not the item should be filtered.
-     */
-    shouldFilterItem: PropTypes.func,
-
-    /**
-     * Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.
-     */
-    size: ListBoxPropTypes.ListBoxSize,
-
-    /**
-     * Provide text to be used in a `<label>` element that is tied to the
-     * combobox via ARIA attributes.
-     */
-    titleText: PropTypes.node,
-
-    /**
-     * Specify a custom translation function that takes in a message identifier
-     * and returns the localized string for the message
-     */
-    translateWithId: PropTypes.func,
-
-    /**
-     * Currently supports either the default type, or an inline variant
-     */
-    type: ListBoxPropTypes.ListBoxType,
-
-    /**
-     * Specify whether the control is currently in warning state
-     */
-    warn: PropTypes.bool,
-
-    /**
-     * Provide the text that is displayed when the control is in warning state
-     */
-    warnText: PropTypes.node,
-  };
-
-  static defaultProps = {
-    disabled: false,
-    itemToString: defaultItemToString,
-    itemToElement: null,
-    shouldFilterItem: defaultShouldFilterItem,
-    type: 'default',
-    ariaLabel: 'Choose an item',
-    light: false,
-    direction: 'bottom',
-  };
-
-  static getDerivedStateFromProps(nextProps, state) {
-    const { prevSelectedItem, doneInitialSelectedItem } = state;
-    const { selectedItem } = nextProps;
-    if (!doneInitialSelectedItem || prevSelectedItem !== selectedItem) {
-      return {
-        doneInitialSelectedItem: true,
-        prevSelectedItem: selectedItem,
-        inputValue: getInputValue(nextProps, state),
-      };
-    }
-    return null;
-  }
-
-  constructor(props) {
-    super(props);
-
-    this.comboBoxInstanceId = getInstanceId();
-    this.state = {
-      inputValue: getInputValue(props, {}),
-    };
-    this.textInput = React.createRef();
+const ComboBox = (props) => {
+  const {
+    ariaLabel,
+    className: containerClassName,
+    direction,
+    disabled,
+    downshiftProps,
+    helperText,
+    id,
+    initialSelectedItem,
+    invalid,
+    invalidText,
+    items,
+    itemToElement,
+    itemToString,
+    light,
+    onChange,
+    onInputChange,
+    onToggleClick, // eslint-disable-line no-unused-vars
+    placeholder,
+    selectedItem,
+    shouldFilterItem,
+    size,
+    titleText,
+    translateWithId,
+    type, // eslint-disable-line no-unused-vars
+    warn,
+    warnText,
+    ...rest
+  } = props;
+
+  const textInput = useRef();
+  const comboBoxInstanceId = getInstanceId();
+  const [inputValue, setInputValue] = useState(
+    getInputValue({
+      initialSelectedItem,
+      inputValue: '',
+      itemToString,
+      selectedItem,
+    })
+  );
+  const [prevSelectedItem, setPrevSelectedItem] = useState(null);
+  const [doneInitialSelectedItem, setDoneInitialSelectedItem] = useState(null);
+
+  if (!doneInitialSelectedItem || prevSelectedItem !== selectedItem) {
+    setDoneInitialSelectedItem(true);
+    setPrevSelectedItem(selectedItem);
+    setInputValue(
+      getInputValue({
+        initialSelectedItem,
+        inputValue,
+        itemToString,
+        selectedItem,
+      })
+    );
   }
 
-  filterItems = (items, itemToString, inputValue) =>
+  const filterItems = (items, itemToString, inputValue) =>
     items.filter((item) =>
-      this.props.shouldFilterItem({
+      shouldFilterItem({
         item,
         itemToString,
         inputValue,
       })
     );
 
-  handleOnChange = (selectedItem) => {
-    if (this.props.onChange) {
-      this.props.onChange({ selectedItem });
+  const handleOnChange = (selectedItem) => {
+    if (onChange) {
+      onChange({ selectedItem });
     }
   };
 
-  handleOnInputValueChange = (inputValue) => {
-    const { onInputChange } = this.props;
-
-    this.setState(
-      () => ({
-        // Default to empty string if we have a false-y `inputValue`
-        inputValue: inputValue || '',
-      }),
-      () => {
-        if (onInputChange) {
-          onInputChange(inputValue);
-        }
-      }
-    );
+  const handleOnInputValueChange = (inputValue) => {
+    setInputValue(inputValue || '');
   };
 
-  handleSelectionClear = () => {
-    if (this.textInput?.current) {
-      this.textInput.current.focus();
+  useEffect(() => {
+    if (onInputChange) {
+      onInputChange(inputValue);
+    }
+  });
+
+  const handleSelectionClear = () => {
+    if (textInput?.current) {
+      textInput.current.focus();
     }
   };
 
-  handleOnStateChange = (newState, { setHighlightedIndex }) => {
+  const handleOnStateChange = (newState, { setHighlightedIndex }) => {
     if (Object.prototype.hasOwnProperty.call(newState, 'inputValue')) {
       const { inputValue } = newState;
-      const items = this.filterItems(
-        this.props.items,
-        this.props.itemToString,
-        inputValue
-      );
+      const filteredItems = filterItems(items, itemToString, inputValue);
       setHighlightedIndex(
         findHighlightedIndex(
           {
-            ...this.props,
-            items,
+            ...props,
+            items: filteredItems,
           },
           inputValue
         )
@@ -308,247 +174,375 @@ export default class ComboBox extends React.Component {
     }
   };
 
-  onToggleClick = (isOpen) => (event) => {
-    if (this.props.onToggleClick) {
-      this.props.onToggleClick(event);
+  const handleToggleClick = (isOpen) => (event) => {
+    if (onToggleClick) {
+      onToggleClick(event);
     }
 
-    if (event.target === this.textInput.current && isOpen) {
+    if (event.target === textInput.current && isOpen) {
       event.preventDownshiftDefault = true;
       event.persist();
     }
-
-    if (this.textInput.current) {
-      this.textInput.current.focus();
-    }
   };
 
-  render() {
-    const {
-      className: containerClassName,
-      disabled,
-      id,
-      items,
-      itemToString,
-      itemToElement,
-      titleText,
-      helperText,
-      placeholder,
-      initialSelectedItem,
-      selectedItem,
-      ariaLabel,
-      translateWithId,
-      invalid,
-      invalidText,
-      light,
-      type, // eslint-disable-line no-unused-vars
-      size,
-      shouldFilterItem, // eslint-disable-line no-unused-vars
-      onChange, // eslint-disable-line no-unused-vars
-      onInputChange, // eslint-disable-line no-unused-vars
-      onToggleClick, // eslint-disable-line no-unused-vars
-      downshiftProps,
-      direction,
-      warn,
-      warnText,
-      ...rest
-    } = this.props;
-    const showWarning = !invalid && warn;
-    const className = cx(`${prefix}--combo-box`, containerClassName, {
-      [`${prefix}--list-box--up`]: direction === 'top',
-      [`${prefix}--combo-box--warning`]: showWarning,
-    });
-    const titleClasses = cx(`${prefix}--label`, {
-      [`${prefix}--label--disabled`]: disabled,
-    });
-    const comboBoxHelperId = !helperText
-      ? undefined
-      : `combobox-helper-text-${this.comboBoxInstanceId}`;
-    const helperClasses = cx(`${prefix}--form__helper-text`, {
-      [`${prefix}--form__helper-text--disabled`]: disabled,
-    });
-    const wrapperClasses = cx(`${prefix}--list-box__wrapper`);
-    const inputClasses = cx(`${prefix}--text-input`, {
-      [`${prefix}--text-input--empty`]: !this.state.inputValue,
-    });
-
-    // needs to be Capitalized for react to render it correctly
-    const ItemToElement = itemToElement;
-    return (
-      <Downshift
-        {...mapDownshiftProps(downshiftProps)}
-        onChange={this.handleOnChange}
-        onInputValueChange={this.handleOnInputValueChange}
-        onStateChange={this.handleOnStateChange}
-        inputValue={this.state.inputValue || ''}
-        itemToString={itemToString}
-        initialSelectedItem={initialSelectedItem}
-        inputId={id}
-        selectedItem={selectedItem}>
-        {({
-          getInputProps,
-          getItemProps,
-          getLabelProps,
-          getMenuProps,
-          getRootProps,
-          getToggleButtonProps,
-          isOpen,
-          inputValue,
-          selectedItem,
-          highlightedIndex,
-          clearSelection,
-          toggleMenu,
-        }) => {
-          const rootProps = getRootProps(
-            {},
-            {
-              suppressRefError: true,
-            }
-          );
-          const labelProps = getLabelProps();
-          const buttonProps = getToggleButtonProps({
-            disabled,
-            onClick: this.onToggleClick(isOpen),
-            // When we moved the "root node" of Downshift to the <input> for
-            // ARIA 1.2 compliance, we unfortunately hit this branch for the
-            // "mouseup" event that downshift listens to:
-            // https://github.com/downshift-js/downshift/blob/v5.2.1/src/downshift.js#L1051-L1065
-            //
-            // As a result, it will reset the state of the component and so we
-            // stop the event from propagating to prevent this. This allows the
-            // toggleMenu behavior for the toggleButton to correctly open and
-            // close the menu.
-            onMouseUp(event) {
+  const showWarning = !invalid && warn;
+  const className = cx(`${prefix}--combo-box`, containerClassName, {
+    [`${prefix}--list-box--up`]: direction === 'top',
+    [`${prefix}--combo-box--warning`]: showWarning,
+  });
+  const titleClasses = cx(`${prefix}--label`, {
+    [`${prefix}--label--disabled`]: disabled,
+  });
+  const comboBoxHelperId = !helperText
+    ? undefined
+    : `combobox-helper-text-${comboBoxInstanceId}`;
+  const helperClasses = cx(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled,
+  });
+  const wrapperClasses = cx(`${prefix}--list-box__wrapper`);
+  const inputClasses = cx(`${prefix}--text-input`, {
+    [`${prefix}--text-input--empty`]: !inputValue,
+  });
+
+  // needs to be Capitalized for react to render it correctly
+  const ItemToElement = itemToElement;
+  return (
+    <Downshift
+      {...mapDownshiftProps(downshiftProps)}
+      onChange={handleOnChange}
+      onInputValueChange={handleOnInputValueChange}
+      onStateChange={handleOnStateChange}
+      inputValue={inputValue || ''}
+      itemToString={itemToString}
+      initialSelectedItem={initialSelectedItem}
+      inputId={id}
+      selectedItem={selectedItem}>
+      {({
+        getInputProps,
+        getItemProps,
+        getLabelProps,
+        getMenuProps,
+        getRootProps,
+        getToggleButtonProps,
+        isOpen,
+        inputValue,
+        selectedItem,
+        highlightedIndex,
+        clearSelection,
+        toggleMenu,
+      }) => {
+        const rootProps = getRootProps(
+          {},
+          {
+            suppressRefError: true,
+          }
+        );
+        const labelProps = getLabelProps();
+        const buttonProps = getToggleButtonProps({
+          disabled,
+          onClick: handleToggleClick(isOpen),
+          // When we moved the "root node" of Downshift to the <input> for
+          // ARIA 1.2 compliance, we unfortunately hit this branch for the
+          // "mouseup" event that downshift listens to:
+          // https://github.com/downshift-js/downshift/blob/v5.2.1/src/downshift.js#L1051-L1065
+          //
+          // As a result, it will reset the state of the component and so we
+          // stop the event from propagating to prevent this. This allows the
+          // toggleMenu behavior for the toggleButton to correctly open and
+          // close the menu.
+          onMouseUp(event) {
+            event.stopPropagation();
+          },
+        });
+        const inputProps = getInputProps({
+          // Remove excess aria `aria-labelledby`. HTML <label for> provides this aria information.
+          'aria-labelledby': null,
+          disabled,
+          placeholder,
+          onClick() {
+            toggleMenu();
+          },
+          onKeyDown: (event) => {
+            if (match(event, keys.Space)) {
               event.stopPropagation();
-            },
-          });
-          const inputProps = getInputProps({
-            // Remove excess aria `aria-labelledby`. HTML <label for> provides this aria information.
-            'aria-labelledby': null,
-            disabled,
-            placeholder,
-            onClick() {
+            }
+
+            if (match(event, keys.Enter)) {
               toggleMenu();
-            },
-            onKeyDown: (event) => {
-              if (match(event, keys.Space)) {
-                event.stopPropagation();
-              }
-
-              if (match(event, keys.Enter)) {
-                toggleMenu();
-              }
-            },
-          });
-
-          return (
-            <div className={wrapperClasses}>
-              {titleText && (
-                <label className={titleClasses} {...labelProps}>
-                  {titleText}
-                </label>
-              )}
-              <ListBox
-                className={className}
-                disabled={disabled}
-                invalid={invalid}
-                invalidText={invalidText}
-                isOpen={isOpen}
-                light={light}
-                size={size}
-                warn={warn}
-                warnText={warnText}>
-                <div className={`${prefix}--list-box__field`}>
-                  <input
-                    role="combobox"
-                    disabled={disabled}
-                    className={inputClasses}
-                    type="text"
-                    tabIndex="0"
-                    aria-autocomplete="list"
-                    aria-expanded={rootProps['aria-expanded']}
-                    aria-haspopup="listbox"
-                    aria-controls={inputProps['aria-controls']}
-                    {...inputProps}
-                    {...rest}
-                    ref={mergeRefs(this.textInput, rootProps.ref)}
+            }
+          },
+        });
+
+        return (
+          <div className={wrapperClasses}>
+            {titleText && (
+              <label className={titleClasses} {...labelProps}>
+                {titleText}
+              </label>
+            )}
+            <ListBox
+              className={className}
+              disabled={disabled}
+              invalid={invalid}
+              invalidText={invalidText}
+              isOpen={isOpen}
+              light={light}
+              size={size}
+              warn={warn}
+              warnText={warnText}>
+              <div className={`${prefix}--list-box__field`}>
+                <input
+                  role="combobox"
+                  disabled={disabled}
+                  className={inputClasses}
+                  type="text"
+                  tabIndex="0"
+                  aria-autocomplete="list"
+                  aria-expanded={rootProps['aria-expanded']}
+                  aria-haspopup="listbox"
+                  aria-controls={inputProps['aria-controls']}
+                  {...inputProps}
+                  {...rest}
+                  ref={mergeRefs(textInput, rootProps.ref)}
+                />
+                {invalid && (
+                  <WarningFilled16
+                    className={`${prefix}--list-box__invalid-icon`}
+                  />
+                )}
+                {showWarning && (
+                  <WarningAltFilled16
+                    className={`${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`}
                   />
-                  {invalid && (
-                    <WarningFilled16
-                      className={`${prefix}--list-box__invalid-icon`}
-                    />
-                  )}
-                  {showWarning && (
-                    <WarningAltFilled16
-                      className={`${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`}
-                    />
-                  )}
-                  {inputValue && (
-                    <ListBoxSelection
-                      clearSelection={clearSelection}
-                      translateWithId={translateWithId}
-                      disabled={disabled}
-                      onClearSelection={this.handleSelectionClear}
-                    />
-                  )}
-                  <ListBoxTrigger
-                    {...buttonProps}
-                    isOpen={isOpen}
+                )}
+                {inputValue && (
+                  <ListBoxSelection
+                    clearSelection={clearSelection}
                     translateWithId={translateWithId}
+                    disabled={disabled}
+                    onClearSelection={handleSelectionClear}
                   />
-                </div>
-                <ListBox.Menu {...getMenuProps({ 'aria-label': ariaLabel })}>
-                  {isOpen
-                    ? this.filterItems(items, itemToString, inputValue).map(
-                        (item, index) => {
-                          const itemProps = getItemProps({
-                            item,
-                            index,
-                            ['aria-current']:
-                              selectedItem === item ? true : null,
-                            ['aria-selected']:
-                              highlightedIndex === index ? true : null,
-                          });
-                          return (
-                            <ListBox.MenuItem
-                              key={itemProps.id}
-                              isActive={selectedItem === item}
-                              tabIndex="-1"
-                              isHighlighted={
-                                highlightedIndex === index ||
-                                (selectedItem && selectedItem.id === item.id) ||
-                                false
-                              }
-                              title={
-                                itemToElement ? item.text : itemToString(item)
-                              }
-                              {...itemProps}>
-                              {itemToElement ? (
-                                <ItemToElement key={itemProps.id} {...item} />
-                              ) : (
-                                itemToString(item)
-                              )}
-                              {selectedItem === item && (
-                                <Checkmark16
-                                  className={`${prefix}--list-box__menu-item__selected-icon`}
-                                />
-                              )}
-                            </ListBox.MenuItem>
-                          );
-                        }
-                      )
-                    : null}
-                </ListBox.Menu>
-              </ListBox>
-              {helperText && !invalid && !warn && (
-                <div id={comboBoxHelperId} className={helperClasses}>
-                  {helperText}
-                </div>
-              )}
-            </div>
-          );
-        }}
-      </Downshift>
-    );
-  }
-}
+                )}
+                <ListBoxTrigger
+                  {...buttonProps}
+                  isOpen={isOpen}
+                  translateWithId={translateWithId}
+                />
+              </div>
+              <ListBox.Menu {...getMenuProps({ 'aria-label': ariaLabel })}>
+                {isOpen
+                  ? filterItems(items, itemToString, inputValue).map(
+                      (item, index) => {
+                        const itemProps = getItemProps({
+                          item,
+                          index,
+                          ['aria-current']: selectedItem === item ? true : null,
+                          ['aria-selected']:
+                            highlightedIndex === index ? true : null,
+                        });
+                        return (
+                          <ListBox.MenuItem
+                            key={itemProps.id}
+                            isActive={selectedItem === item}
+                            tabIndex="-1"
+                            isHighlighted={
+                              highlightedIndex === index ||
+                              (selectedItem && selectedItem.id === item.id) ||
+                              false
+                            }
+                            title={
+                              itemToElement ? item.text : itemToString(item)
+                            }
+                            {...itemProps}>
+                            {itemToElement ? (
+                              <ItemToElement key={itemProps.id} {...item} />
+                            ) : (
+                              itemToString(item)
+                            )}
+                            {selectedItem === item && (
+                              <Checkmark16
+                                className={`${prefix}--list-box__menu-item__selected-icon`}
+                              />
+                            )}
+                          </ListBox.MenuItem>
+                        );
+                      }
+                    )
+                  : null}
+              </ListBox.Menu>
+            </ListBox>
+            {helperText && !invalid && !warn && (
+              <div id={comboBoxHelperId} className={helperClasses}>
+                {helperText}
+              </div>
+            )}
+          </div>
+        );
+      }}
+    </Downshift>
+  );
+};
+
+ComboBox.propTypes = {
+  /**
+   * 'aria-label' of the ListBox component.
+   */
+  ariaLabel: PropTypes.string,
+
+  /**
+   * An optional className to add to the container node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the direction of the combobox dropdown. Can be either top or bottom.
+   */
+  direction: PropTypes.oneOf(['top', 'bottom']),
+
+  /**
+   * Specify if the control should be disabled, or not
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Additional props passed to Downshift
+   */
+  downshiftProps: PropTypes.shape(Downshift.propTypes),
+
+  /**
+   * Provide helper text that is used alongside the control label for
+   * additional help
+   */
+  helperText: PropTypes.string,
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
+   * from their collection that are pre-selected
+   */
+  initialSelectedItem: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string,
+  ]),
+
+  /**
+   * Specify if the currently selected value is invalid.
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Optional function to render items as custom components instead of strings.
+   * Defaults to null and is overriden by a getter
+   */
+  itemToElement: PropTypes.func,
+
+  /**
+   * Helper function passed to downshift that allows the library to render a
+   * given item to a string label. By default, it extracts the `label` field
+   * from a given item to serve as the item label in the list
+   */
+  itemToString: PropTypes.func,
+
+  /**
+   * We try to stay as generic as possible here to allow individuals to pass
+   * in a collection of whatever kind of data structure they prefer
+   */
+  items: PropTypes.array.isRequired,
+
+  /**
+   * should use "light theme" (white background)?
+   */
+  light: PropTypes.bool,
+
+  /**
+   * `onChange` is a utility for this controlled component to communicate to a
+   * consuming component when a specific dropdown item is selected.
+   * @param {{ selectedItem }}
+   */
+  onChange: PropTypes.func.isRequired,
+
+  /**
+   * Callback function to notify consumer when the text input changes.
+   * This provides support to change available items based on the text.
+   * @param {string} inputText
+   */
+  onInputChange: PropTypes.func,
+
+  /**
+   * Callback function that fires when the combobox menu toggle is clicked
+   * @param {MouseEvent} event
+   */
+  onToggleClick: PropTypes.func,
+
+  /**
+   * Used to provide a placeholder text node before a user enters any input.
+   * This is only present if the control has no items selected
+   */
+  placeholder: PropTypes.string.isRequired,
+
+  /**
+   * For full control of the selection
+   */
+  selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+
+  /**
+   * Specify your own filtering logic by passing in a `shouldFilterItem`
+   * function that takes in the current input and an item and passes back
+   * whether or not the item should be filtered.
+   */
+  shouldFilterItem: PropTypes.func,
+
+  /**
+   * Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.
+   */
+  size: ListBoxPropTypes.ListBoxSize,
+
+  /**
+   * Provide text to be used in a `<label>` element that is tied to the
+   * combobox via ARIA attributes.
+   */
+  titleText: PropTypes.node,
+
+  /**
+   * Specify a custom translation function that takes in a message identifier
+   * and returns the localized string for the message
+   */
+  translateWithId: PropTypes.func,
+
+  /**
+   * Currently supports either the default type, or an inline variant
+   */
+  type: ListBoxPropTypes.ListBoxType,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node,
+};
+
+ComboBox.defaultProps = {
+  disabled: false,
+  itemToString: defaultItemToString,
+  itemToElement: null,
+  shouldFilterItem: defaultShouldFilterItem,
+  type: 'default',
+  ariaLabel: 'Choose an item',
+  light: false,
+  direction: 'bottom',
+};
+
+export default ComboBox;
diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js
index 6834255f49a6..22f08575d725 100644
--- a/packages/react/src/components/Dropdown/Dropdown-story.js
+++ b/packages/react/src/components/Dropdown/Dropdown-story.js
@@ -21,8 +21,7 @@ import mdx from './Dropdown.mdx';
 const items = [
   {
     id: 'option-0',
-    text:
-      'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, aliquam. Blanditiis quia nemo enim voluptatibus quos ducimus porro molestiae nesciunt error cumque quaerat, tempore vero unde eum aperiam eligendi repellendus.',
+    text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
   },
   {
     id: 'option-1',
diff --git a/packages/react/src/components/Dropdown/Dropdown-test.js b/packages/react/src/components/Dropdown/Dropdown-test.js
index 5c092d4cb041..06f5e3ea26a4 100644
--- a/packages/react/src/components/Dropdown/Dropdown-test.js
+++ b/packages/react/src/components/Dropdown/Dropdown-test.js
@@ -11,7 +11,6 @@ import { mount, shallow } from 'enzyme';
 import {
   assertMenuOpen,
   assertMenuClosed,
-  findMenuItemNode,
   openMenu,
   generateItems,
   generateGenericItem,
@@ -134,7 +133,7 @@ describe('Dropdown', () => {
   it('should let the user select an option by clicking on the option node', () => {
     const wrapper = mount(<Dropdown {...mockProps} />);
     openMenu(wrapper);
-    findMenuItemNode(wrapper, 0).simulate('click');
+    wrapper.find('ForwardRef(ListBoxMenuItem)').at(0).simulate('click');
     expect(mockProps.onChange).toHaveBeenCalledTimes(1);
     expect(mockProps.onChange).toHaveBeenCalledWith({
       selectedItem: mockProps.items[0],
@@ -144,7 +143,7 @@ describe('Dropdown', () => {
     mockProps.onChange.mockClear();
 
     openMenu(wrapper);
-    findMenuItemNode(wrapper, 1).simulate('click');
+    wrapper.find('ForwardRef(ListBoxMenuItem)').at(1).simulate('click');
     expect(mockProps.onChange).toHaveBeenCalledTimes(1);
     expect(mockProps.onChange).toHaveBeenCalledWith({
       selectedItem: mockProps.items[1],
diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
index 1647967d0994..1262ab6a8fb1 100644
--- a/packages/react/src/components/Dropdown/Dropdown.js
+++ b/packages/react/src/components/Dropdown/Dropdown.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useRef } from 'react';
 import { useSelect } from 'downshift';
 import { settings } from 'carbon-components';
 import cx from 'classnames';
@@ -130,6 +130,8 @@ const Dropdown = React.forwardRef(function Dropdown(
     }
   }
 
+  const menuItemOptionRefs = useRef(items.map((_) => React.createRef()));
+
   return (
     <div className={wrapperClasses} {...other}>
       {titleText && (
@@ -172,6 +174,9 @@ const Dropdown = React.forwardRef(function Dropdown(
           {isOpen &&
             items.map((item, index) => {
               const itemProps = getItemProps({ item, index });
+              const title = itemToElement ? item.text : itemToString(item);
+              const { offsetWidth, scrollWidth } =
+                menuItemOptionRefs?.current[index]?.current || {};
               return (
                 <ListBox.MenuItem
                   key={itemProps.id}
@@ -179,7 +184,10 @@ const Dropdown = React.forwardRef(function Dropdown(
                   isHighlighted={
                     highlightedIndex === index || selectedItem === item
                   }
-                  title={itemToElement ? item.text : itemToString(item)}
+                  title={(offsetWidth < scrollWidth && title) || undefined}
+                  ref={{
+                    menuItemOptionRef: menuItemOptionRefs.current[index],
+                  }}
                   {...itemProps}>
                   {itemToElement ? (
                     <ItemToElement key={itemProps.id} {...item} />
diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
index 917f5b55ae98..0612f7662ee3 100644
--- a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
+++ b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
@@ -293,7 +293,7 @@ exports[`Dropdown should render custom item components 1`] = `
             role="listbox"
             tabIndex={-1}
           >
-            <ListBoxMenuItem
+            <ForwardRef(ListBoxMenuItem)
               aria-selected="false"
               id="downshift-6-item-0"
               isActive={false}
@@ -328,8 +328,8 @@ exports[`Dropdown should render custom item components 1`] = `
                   </itemToElement>
                 </div>
               </div>
-            </ListBoxMenuItem>
-            <ListBoxMenuItem
+            </ForwardRef(ListBoxMenuItem)>
+            <ForwardRef(ListBoxMenuItem)
               aria-selected="false"
               id="downshift-6-item-1"
               isActive={false}
@@ -364,8 +364,8 @@ exports[`Dropdown should render custom item components 1`] = `
                   </itemToElement>
                 </div>
               </div>
-            </ListBoxMenuItem>
-            <ListBoxMenuItem
+            </ForwardRef(ListBoxMenuItem)>
+            <ForwardRef(ListBoxMenuItem)
               aria-selected="false"
               id="downshift-6-item-2"
               isActive={false}
@@ -400,8 +400,8 @@ exports[`Dropdown should render custom item components 1`] = `
                   </itemToElement>
                 </div>
               </div>
-            </ListBoxMenuItem>
-            <ListBoxMenuItem
+            </ForwardRef(ListBoxMenuItem)>
+            <ForwardRef(ListBoxMenuItem)
               aria-selected="false"
               id="downshift-6-item-3"
               isActive={false}
@@ -436,8 +436,8 @@ exports[`Dropdown should render custom item components 1`] = `
                   </itemToElement>
                 </div>
               </div>
-            </ListBoxMenuItem>
-            <ListBoxMenuItem
+            </ForwardRef(ListBoxMenuItem)>
+            <ForwardRef(ListBoxMenuItem)
               aria-selected="false"
               id="downshift-6-item-4"
               isActive={false}
@@ -472,7 +472,7 @@ exports[`Dropdown should render custom item components 1`] = `
                   </itemToElement>
                 </div>
               </div>
-            </ListBoxMenuItem>
+            </ForwardRef(ListBoxMenuItem)>
           </div>
         </ListBoxMenu>
       </div>
@@ -601,7 +601,7 @@ exports[`Dropdown should render with strings as items 1`] = `
             role="listbox"
             tabIndex={-1}
           >
-            <ListBoxMenuItem
+            <ForwardRef(ListBoxMenuItem)
               aria-selected="false"
               id="downshift-4-item-0"
               isActive={false}
@@ -610,7 +610,6 @@ exports[`Dropdown should render with strings as items 1`] = `
               onClick={[Function]}
               onMouseMove={[Function]}
               role="option"
-              title="zar"
             >
               <div
                 aria-selected="false"
@@ -619,7 +618,6 @@ exports[`Dropdown should render with strings as items 1`] = `
                 onClick={[Function]}
                 onMouseMove={[Function]}
                 role="option"
-                title="zar"
               >
                 <div
                   className="bx--list-box__menu-item__option"
@@ -627,8 +625,8 @@ exports[`Dropdown should render with strings as items 1`] = `
                   zar
                 </div>
               </div>
-            </ListBoxMenuItem>
-            <ListBoxMenuItem
+            </ForwardRef(ListBoxMenuItem)>
+            <ForwardRef(ListBoxMenuItem)
               aria-selected="false"
               id="downshift-4-item-1"
               isActive={false}
@@ -637,7 +635,6 @@ exports[`Dropdown should render with strings as items 1`] = `
               onClick={[Function]}
               onMouseMove={[Function]}
               role="option"
-              title="doz"
             >
               <div
                 aria-selected="false"
@@ -646,7 +643,6 @@ exports[`Dropdown should render with strings as items 1`] = `
                 onClick={[Function]}
                 onMouseMove={[Function]}
                 role="option"
-                title="doz"
               >
                 <div
                   className="bx--list-box__menu-item__option"
@@ -654,7 +650,7 @@ exports[`Dropdown should render with strings as items 1`] = `
                   doz
                 </div>
               </div>
-            </ListBoxMenuItem>
+            </ForwardRef(ListBoxMenuItem)>
           </div>
         </ListBoxMenu>
       </div>
diff --git a/packages/react/src/components/ListBox/ListBoxMenu.js b/packages/react/src/components/ListBox/ListBoxMenu.js
index 97c1137eb1ac..019ffca2cee7 100644
--- a/packages/react/src/components/ListBox/ListBoxMenu.js
+++ b/packages/react/src/components/ListBox/ListBoxMenu.js
@@ -39,6 +39,7 @@ ListBoxMenu.propTypes = {
    * Provide the contents of your ListBoxMenu
    */
   children: PropTypes.oneOfType([
+    PropTypes.node,
     PropTypes.arrayOf(ListBoxMenuItem),
     /**
      * allow single item using the workaround for functional components
diff --git a/packages/react/src/components/ListBox/ListBoxMenuItem.js b/packages/react/src/components/ListBox/ListBoxMenuItem.js
index b94160b2d46d..c440c48be066 100644
--- a/packages/react/src/components/ListBox/ListBoxMenuItem.js
+++ b/packages/react/src/components/ListBox/ListBoxMenuItem.js
@@ -6,29 +6,52 @@
  */
 
 import cx from 'classnames';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { settings } from 'carbon-components';
 
 const { prefix } = settings;
 
+function useIsTruncated(ref) {
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  useEffect(() => {
+    const { offsetWidth, scrollWidth } = ref.current;
+    setIsTruncated(offsetWidth < scrollWidth);
+  }, [ref, setIsTruncated]);
+
+  return isTruncated;
+}
+
 /**
  * `ListBoxMenuItem` is a helper component for managing the container class
  * name, alongside any classes for any corresponding states, for a generic list
  * box menu item.
  */
-const ListBoxMenuItem = ({ children, isActive, isHighlighted, ...rest }) => {
-  const className = cx({
-    [`${prefix}--list-box__menu-item`]: true,
+const ListBoxMenuItem = React.forwardRef(function ListBoxMenuItem(
+  { children, isActive, isHighlighted, title, ...rest },
+  forwardedRef
+) {
+  const ref = useRef(null);
+  const isTruncated = useIsTruncated(forwardedRef?.menuItemOptionRef || ref);
+  const className = cx(`${prefix}--list-box__menu-item`, {
     [`${prefix}--list-box__menu-item--active`]: isActive,
     [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted,
   });
+
   return (
-    <div className={className} {...rest}>
-      <div className={`${prefix}--list-box__menu-item__option`}>{children}</div>
+    <div
+      {...rest}
+      className={className}
+      title={isTruncated ? title : undefined}>
+      <div
+        className={`${prefix}--list-box__menu-item__option`}
+        ref={forwardedRef?.menuItemOptionRef || ref}>
+        {children}
+      </div>
     </div>
   );
-};
+});
 
 ListBoxMenuItem.propTypes = {
   /**
@@ -46,6 +69,11 @@ ListBoxMenuItem.propTypes = {
    * Specify whether the current menu item is "highlighed".
    */
   isHighlighted: PropTypes.bool.isRequired,
+
+  /**
+   * Provide an optional tooltip for the ListBoxMenuItem
+   */
+  title: PropTypes.string,
 };
 
 ListBoxMenuItem.defaultProps = {
diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenu-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenu-test.js.snap
index 52cc01053551..c9d75663e139 100644
--- a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenu-test.js.snap
+++ b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenu-test.js.snap
@@ -9,7 +9,7 @@ exports[`ListBoxMenu should render 1`] = `
     id="test-listbox"
     role="listbox"
   >
-    <ListBoxMenuItem
+    <ForwardRef(ListBoxMenuItem)
       isActive={false}
       isHighlighted={false}
     >
@@ -22,7 +22,7 @@ exports[`ListBoxMenu should render 1`] = `
           Hello
         </div>
       </div>
-    </ListBoxMenuItem>
+    </ForwardRef(ListBoxMenuItem)>
   </div>
 </ListBoxMenu>
 `;
diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuItem-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuItem-test.js.snap
index 0f20253e8d57..8b1f126a2baf 100644
--- a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuItem-test.js.snap
+++ b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuItem-test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ListBoxMenuItem should render 1`] = `
-<ListBoxMenuItem
+<ForwardRef(ListBoxMenuItem)
   isActive={false}
   isHighlighted={false}
 >
@@ -16,11 +16,11 @@ exports[`ListBoxMenuItem should render 1`] = `
       </span>
     </div>
   </div>
-</ListBoxMenuItem>
+</ForwardRef(ListBoxMenuItem)>
 `;
 
 exports[`ListBoxMenuItem should render 2`] = `
-<ListBoxMenuItem
+<ForwardRef(ListBoxMenuItem)
   isActive={true}
   isHighlighted={false}
 >
@@ -35,11 +35,11 @@ exports[`ListBoxMenuItem should render 2`] = `
       </span>
     </div>
   </div>
-</ListBoxMenuItem>
+</ForwardRef(ListBoxMenuItem)>
 `;
 
 exports[`ListBoxMenuItem should render 3`] = `
-<ListBoxMenuItem
+<ForwardRef(ListBoxMenuItem)
   isActive={false}
   isHighlighted={true}
 >
@@ -54,5 +54,5 @@ exports[`ListBoxMenuItem should render 3`] = `
       </span>
     </div>
   </div>
-</ListBoxMenuItem>
+</ForwardRef(ListBoxMenuItem)>
 `;
diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
index 94e3a0ac1b27..978a23ba03e7 100644
--- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
@@ -17,7 +17,7 @@ import {
   generateGenericItem,
 } from '../../ListBox/test-helpers';
 
-const listItemName = 'ListBoxMenuItem';
+const listItemName = 'ForwardRef(ListBoxMenuItem)';
 
 describe('MultiSelect.Filterable', () => {
   let mockProps;
@@ -124,7 +124,7 @@ describe('MultiSelect.Filterable', () => {
     });
   });
 
-  it('should let items stay at thier position after selecting', () => {
+  it('should let items stay at their position after selecting', () => {
     const wrapper = mount(
       <MultiSelect.Filterable {...mockProps} selectionFeedback="fixed" />
     );
diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
index 6d290f73fb5c..69274c14bc32 100644
--- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
@@ -400,7 +400,7 @@ describe('MultiSelect', () => {
       );
 
       // the first option in the list to the the former third option in the list
-      expect(optionsArray[0].title).toBe('Item 2');
+      expect(optionsArray[0].getAttribute('aria-label')).toBe('Item 2');
     });
 
     it('should accept a `ref` for the underlying button element', () => {