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>

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