fix: controlled tag component for selected prop carbon-design-system#19228

Author: sojinantony01

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

@@ -13,6 +13,7 @@ import React, {
   MouseEvent,
   forwardRef,
   ForwardedRef,
+  useEffect,
 } from 'react';
 import classNames from 'classnames';
 import { useId } from '../../internal/useId';
@@ -101,6 +102,12 @@ const SelectableTag = forwardRef(
     });
     const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
 
+    useEffect(() => {
+      if (selected !== selectedTag) {
+        setSelectedTag(selected);
+      }
+    }, [selected]);
+
     useLayoutEffect(() => {
       const newElement = tagRef.current?.getElementsByClassName(
         `${prefix}--tag__label`

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,19 @@ describe('Tag', () => {
     render(<SelectableTag type="red" text="Test Tag" ref={ref} />);
     expect(ref.current).toBeInstanceOf(HTMLButtonElement);
   });
+  it('Controlled selected tag', () => {
+    const ref = React.createRef();
+    const { rerender } = render(
+      <SelectableTag type="red" text="Test Tag" ref={ref} selected={true} />
+    );
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    expect(selectableTag).toHaveClass(`${prefix}--tag--selectable-selected`);
+
+    rerender(
+      <SelectableTag type="red" text="Test Tag" ref={ref} selected={false} />
+    );
+    expect(selectableTag).container.toHaveClass(
+      `${prefix}--tag--selectable-selected`
+    );
+  });
 });