fix: controlled tag component for selected prop #19228 (#19231)

* fix: controlled tag component for selected prop #19228

* fix: fix tests for tag

* fix: controlled tag component for selected prop #19228

* fix: controlled tag added a default selected prop and tests #19228

* fix: controlled tag added a default selected prop and tests #19228

* fix: controlled tag added a default selected prop and tests #19228

* fix: controlled tag fix tests #19228

* fix: add profile

* fix: add profile

Author: sojinantony01

.all-contributorsrc

@@ -1875,6 +1875,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "sojinantony01",
+      "name": "Sojin antony",
+      "avatar_url": "https://avatars.githubusercontent.com/u/29255847?v=4",
+      "profile": "https://github.com/sojinantony01",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

README.md

@@ -338,7 +338,10 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/vcherneny"><img src="https://avatars.githubusercontent.com/u/11604315?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Vlad Cherneny</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=vcherneny" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/murito"><img src="https://avatars.githubusercontent.com/u/2628140?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Francisco Alcalá</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=murito" title="Code">💻</a></td>
     <td align="center"><a href="https://www.linkedin.com/in/sujithcs"><img src="https://avatars.githubusercontent.com/u/43125517?v=4?s=100" width="100px;" alt=""/><br /><sub><b>SUJITH C S</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Code-Suji" title="Code">💻</a></td>
+  </tr>
+  <tr>
     <td align="center"><a href="https://github.com/mariyageorge01"><img src="https://avatars.githubusercontent.com/u/166684108?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mariya George</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=mariyageorge01" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/sojinantony01"><img src="https://avatars.githubusercontent.com/u/29255847?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sojin antony</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=sojinantony01" title="Code">💻</a></td>
   </tr>
 </table>
 

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -7063,6 +7063,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "defaultSelected": Object {
+        "type": "bool",
+      },
       "disabled": Object {
         "type": "bool",
       },

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,65 @@ 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');
+  });
 });