fix: controlled tag component for selected prop #19228

packages/react/src/components/Tag/SelectableTag.tsx

@@ -23,6 +23,7 @@ import { Tooltip } from '../Tooltip';
 import { Text } from '../Text';
 import { isEllipsisActive } from './isEllipsisActive';
 import mergeRefs from '../../tools/mergeRefs';
+import { useControllableState } from '../../internal/useControllableState';
 export interface SelectableTagBaseProps {
   /**
    * Provide a custom className that is applied to the containing <span>
@@ -59,6 +60,11 @@ export interface SelectableTagBaseProps {
    */
   selected?: boolean;
 
+  /**
+   * Specify the default state of the selectable tag.
+   */
+  defaultSelected?: boolean;
+
   /**
    * Specify the size of the Tag. Currently supports either `sm`,
    * `md` (default) or `lg` sizes.
@@ -85,17 +91,22 @@ const SelectableTag = forwardRef(
       renderIcon,
       onChange,
       onClick,
-      selected = false,
+      selected,
       size,
       text,
+      defaultSelected = false,
       ...other
     }: SelectableTagProps<T>,
     forwardRef: ForwardedRef<HTMLButtonElement>
   ) => {
     const prefix = usePrefix();
     const tagRef = useRef<HTMLButtonElement>(null);
     const tagId = id || `tag-${useId()}`;
-    const [selectedTag, setSelectedTag] = useState(selected);
+    const [selectedTag, setSelectedTag] = useControllableState({
+      value: selected,
+      onChange: onChange,
+      defaultValue: defaultSelected,
+    });
     const tagClasses = classNames(`${prefix}--tag--selectable`, className, {
       [`${prefix}--tag--selectable-selected`]: selectedTag,
     });
@@ -116,7 +127,6 @@ const SelectableTag = forwardRef(
 
     const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
       setSelectedTag(!selectedTag);
-      onChange?.(!selectedTag);
       onClick?.(e);
     };
 
@@ -201,6 +211,11 @@ SelectableTag.propTypes = {
    */
   selected: PropTypes.bool,
 
+  /**
+   * Specify the default state of the selectable tag.
+   */
+  defaultSelected: PropTypes.bool,
+
   /**
    * Specify the size of the Tag. Currently supports either `sm`,
    * `md` (default) or `lg` sizes.

packages/react/src/components/Tag/Tag-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.
@@ -308,4 +308,64 @@ describe('Tag', () => {
     render(<SelectableTag type="red" text="Test Tag" ref={ref} />);
     expect(ref.current).toBeInstanceOf(HTMLButtonElement);
   });
+  it('Controlled selectable tag', () => {
+    const ref = React.createRef();
+
+    const { rerender } = render(
+      <SelectableTag type="red" text="Test Tag" ref={ref} selected={true} />
+    );
+
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    expect(screen.getByRole('button', { name: 'Test Tag' })).toHaveAttribute(
+      'aria-pressed',
+      'true'
+    );
+
+    rerender(
+      <SelectableTag type="red" text="Test Tag" ref={ref} selected={false} />
+    );
+    expect(screen.getByRole('button', { name: 'Test Tag' })).toHaveAttribute(
+      'aria-pressed',
+      'false'
+    );
+  });
+  it('Controlled selectable tag, should call onChange', async () => {
+    const onChange = jest.fn();
+
+    render(
+      <SelectableTag text="Tag content" onChange={onChange} selected={true} />
+    );
+
+    const selectableTag = screen.getByRole('button', { name: 'Tag content' });
+    await userEvent.click(selectableTag);
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+  it('Controlled selectable tag should be selected by default if defaultSelected is true', () => {
+    const onChange = jest.fn();
+
+    render(
+      <SelectableTag
+        text="Tag content"
+        onChange={onChange}
+        defaultSelected={true}
+      />
+    );
+
+    const selectableTag = screen.getByRole('button', { name: 'Tag content' });
+    expect(selectableTag).toHaveAttribute('aria-pressed', 'true');
+  });
+  it('Controlled selectable tag should not be be selected by default if defaultSelected is false', () => {
+    const onChange = jest.fn();
+
+    render(
+      <SelectableTag
+        text="Tag content"
+        onChange={onChange}
+        defaultSelected={false}
+      />
+    );
+
+    const selectableTag = screen.getByRole('button', { name: 'Tag content' });
+    expect(selectableTag).toHaveAttribute('aria-pressed', 'false');
+  });
 });