fix: update Dropdown and MultiSelect to handle interactive labels (#18643)

* fix: update Dropdown and MultiSelect to handle interactive labels

* fix: conditionally add props to Dropdown and MultiSelect labels

---------

Co-authored-by: Anna Wen <54281166+annawen1@users.noreply.github.com>

Author: adamalston

packages/react/src/components/Dropdown/Dropdown.stories.js

@@ -1,20 +1,28 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import React from 'react';
+import { FolderOpen, Folders, Information, View } from '@carbon/icons-react';
 
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
 
 import { default as Dropdown, DropdownSkeleton } from './';
 import Button from '../Button';
 import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
+import {
+  Toggletip,
+  ToggletipActions,
+  ToggletipButton,
+  ToggletipContent,
+  ToggletipLabel,
+} from '../Toggletip';
 import { IconButton } from '../IconButton';
-import { View, FolderOpen, Folders } from '@carbon/icons-react';
 import mdx from './Dropdown.mdx';
+import Link from '../Link';
 
 export default {
   title: 'Components/Dropdown',
@@ -452,3 +460,36 @@ export const withAILabel = (args) => {
 withAILabel.argTypes = {
   ...sharedArgTypes,
 };
+
+export const withToggletipLabel = () => {
+  return (
+    <div>
+      <Dropdown
+        label="placeholder"
+        id="dropdown"
+        items={[]}
+        titleText={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ToggletipLabel>Dropdown title</ToggletipLabel>
+            <Toggletip>
+              <ToggletipButton label="Show information">
+                <Information />
+              </ToggletipButton>
+              <ToggletipContent>
+                <p>
+                  Lorem ipsum dolor sit amet, di os consectetur adipiscing elit,
+                  sed do eiusmod tempor incididunt ut fsil labore et dolore
+                  magna aliqua.
+                </p>
+                <ToggletipActions>
+                  <Link href="#">Link action</Link>
+                  <Button size="sm">Button</Button>
+                </ToggletipActions>
+              </ToggletipContent>
+            </Toggletip>
+          </div>
+        }
+      />
+    </div>
+  );
+};

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -1,21 +1,21 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import React, {
-  useCallback,
-  useContext,
-  useState,
   FocusEvent,
   ForwardedRef,
+  isValidElement,
   MouseEvent,
   ReactNode,
+  useCallback,
+  useContext,
   useEffect,
   useMemo,
-  ReactElement,
+  useState,
 } from 'react';
 import {
   useSelect,
@@ -608,10 +608,12 @@ const Dropdown = React.forwardRef(
       return React.isValidElement(element) ? element : null;
     }, [slug, decorator]);
 
+    const labelProps = !isValidElement(titleText) ? getLabelProps() : null;
+
     return (
       <div className={wrapperClasses} {...other}>
         {titleText && (
-          <label className={titleClasses} {...getLabelProps()}>
+          <label className={titleClasses} {...labelProps}>
             {titleText}
           </label>
         )}

packages/react/src/components/Dropdown/__tests__/Dropdown-test.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -458,4 +458,20 @@ describe('Test useEffect ', () => {
     await waitForPosition();
     assertMenuClosed();
   });
+
+  it('should add label props when `titleText` is a string', () => {
+    render(<Dropdown {...mockProps} titleText="Dropdown Title" />);
+
+    const label = screen.getByText('Dropdown Title').closest('label');
+
+    expect(label).toHaveAttribute('id');
+  });
+
+  it('should not add label props when `titleText` is an element', () => {
+    render(<Dropdown {...mockProps} titleText={<span>Dropdown Title</span>} />);
+
+    const label = screen.getByText('Dropdown Title').closest('label');
+
+    expect(label).not.toHaveAttribute('id');
+  });
 });

packages/react/src/components/MultiSelect/MultiSelect.stories.js

@@ -1,11 +1,12 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import React, { useEffect, useRef, useState } from 'react';
+import { View, FolderOpen, Folders, Information } from '@carbon/icons-react';
 import { action } from '@storybook/addon-actions';
 
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
@@ -17,7 +18,14 @@ import Button from '../Button';
 import ButtonSet from '../ButtonSet';
 import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
 import { IconButton } from '../IconButton';
-import { View, FolderOpen, Folders } from '@carbon/icons-react';
+import {
+  Toggletip,
+  ToggletipActions,
+  ToggletipButton,
+  ToggletipContent,
+  ToggletipLabel,
+} from '../Toggletip';
+import Link from '../Link';
 
 export default {
   title: 'Components/MultiSelect',
@@ -595,3 +603,40 @@ export const ExperimentalAutoAlign = (args) => {
 };
 
 ExperimentalAutoAlign.argTypes = { ...sharedArgTypes };
+
+export const withToggletipLabel = (args) => {
+  return (
+    <div>
+      <MultiSelect
+        label="Multiselect Label"
+        id="carbon-multiselect-example"
+        titleText={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <ToggletipLabel>Multiselect title</ToggletipLabel>
+            <Toggletip>
+              <ToggletipButton label="Show information">
+                <Information />
+              </ToggletipButton>
+              <ToggletipContent>
+                <p>
+                  Lorem ipsum dolor sit amet, di os consectetur adipiscing elit,
+                  sed do eiusmod tempor incididunt ut fsil labore et dolore
+                  magna aliqua.
+                </p>
+                <ToggletipActions>
+                  <Link href="#">Link action</Link>
+                  <Button size="sm">Button</Button>
+                </ToggletipActions>
+              </ToggletipContent>
+            </Toggletip>
+          </div>
+        }
+        helperText="This is helper text"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+        selectionFeedback="top-after-reopen"
+        {...args}
+      />
+    </div>
+  );
+};

packages/react/src/components/MultiSelect/MultiSelect.tsx

@@ -22,6 +22,7 @@ import React, {
   useMemo,
   ReactNode,
   useLayoutEffect,
+  isValidElement,
 } from 'react';
 import ListBox, {
   ListBoxSize,
@@ -729,9 +730,11 @@ const MultiSelect = React.forwardRef(
       [enableFloatingStyles, getMenuProps, refs.setFloating]
     );
 
+    const labelProps = !isValidElement(titleText) ? getLabelProps() : null;
+
     return (
       <div className={wrapperClasses}>
-        <label className={titleClasses} {...getLabelProps()}>
+        <label className={titleClasses} {...labelProps}>
           {titleText && titleText}
           {selectedItems.length > 0 && (
             <span className={`${prefix}--visually-hidden`}>

packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -24,9 +24,18 @@ import userEvent from '@testing-library/user-event';
 
 const prefix = 'cds';
 const waitForPosition = () => act(async () => {});
+
 describe('MultiSelect', () => {
+  let mockProps;
   beforeEach(() => {
     jest.mock('../../../internal/deprecateFieldOnObject');
+    mockProps = {
+      id: 'test-multiselect',
+      initialSelectedItems: [],
+      items: generateItems(5, generateGenericItem),
+      label: 'Test label',
+      onChange: jest.fn(),
+    };
   });
 
   describe.skip('automated accessibility tests', () => {
@@ -925,4 +934,22 @@ describe('MultiSelect', () => {
     expect(result).toBe('');
     expect(mockItemToString).not.toHaveBeenCalled();
   });
+
+  it('should add label props when `titleText` is a string', () => {
+    render(<MultiSelect {...mockProps} titleText="MultiSelect Title" />);
+
+    const label = screen.getByText('MultiSelect Title').closest('label');
+
+    expect(label).toHaveAttribute('id');
+  });
+
+  it('should not add label props when `titleText` is an element', () => {
+    render(
+      <MultiSelect {...mockProps} titleText={<span>MultiSelect Title</span>} />
+    );
+
+    const label = screen.getByText('MultiSelect Title').closest('label');
+
+    expect(label).not.toHaveAttribute('id');
+  });
 });