fix: adds forwardRef to OperationalTag (#18741)

Co-authored-by: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com>

Author: 2nikhiltom

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

@@ -5886,6 +5886,7 @@ Map {
     },
   },
   "OperationalTag" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
       "className": Object {
         "type": "string",
@@ -5940,6 +5941,7 @@ Map {
         "type": "oneOf",
       },
     },
+    "render": [Function],
   },
   "OrderedList" => Object {
     "propTypes": Object {

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

@@ -12,6 +12,8 @@ import React, {
   useState,
   ReactNode,
   useRef,
+  forwardRef,
+  ForwardedRef,
 } from 'react';
 import classNames from 'classnames';
 import { useId } from '../../internal/useId';
@@ -21,6 +23,7 @@ import Tag, { SIZES } from './Tag';
 import { Tooltip } from '../Tooltip';
 import { Text } from '../Text';
 import { isEllipsisActive } from './isEllipsisActive';
+import mergeRefs from '../../tools/mergeRefs';
 
 const TYPES = {
   red: 'Red',
@@ -80,77 +83,83 @@ export type OperationalTagProps<T extends React.ElementType> = PolymorphicProps<
   OperationalTagBaseProps
 >;
 
-const OperationalTag = <T extends React.ElementType>({
-  className,
-  disabled,
-  id,
-  renderIcon,
-  size,
-  text,
-  type = 'gray',
-  ...other
-}: OperationalTagProps<T>) => {
-  const prefix = usePrefix();
-  const tagRef = useRef<HTMLButtonElement>(null);
-  const tagId = id || `tag-${useId()}`;
-  const tagClasses = classNames(`${prefix}--tag--operational`, className);
-  const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
-
-  useLayoutEffect(() => {
-    const newElement = tagRef.current?.getElementsByClassName(
-      `${prefix}--tag__label`
-    )[0];
-
-    setIsEllipsisApplied(isEllipsisActive(newElement));
-  }, [prefix, tagRef]);
-
-  const tooltipClasses = classNames(
-    `${prefix}--icon-tooltip`,
-    `${prefix}--tag-label-tooltip`
-  );
-
-  if (isEllipsisApplied) {
+const OperationalTag = forwardRef(
+  <T extends React.ElementType>(
+    {
+      className,
+      disabled,
+      id,
+      renderIcon,
+      size,
+      text,
+      type = 'gray',
+      ...other
+    }: OperationalTagProps<T>,
+    forwardRef: ForwardedRef<HTMLLIElement>
+  ) => {
+    const prefix = usePrefix();
+    const tagRef = useRef<HTMLButtonElement>(null);
+    const tagId = id || `tag-${useId()}`;
+    const tagClasses = classNames(`${prefix}--tag--operational`, className);
+    const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
+
+    useLayoutEffect(() => {
+      const newElement = tagRef.current?.getElementsByClassName(
+        `${prefix}--tag__label`
+      )[0];
+
+      setIsEllipsisApplied(isEllipsisActive(newElement));
+    }, [prefix, tagRef]);
+
+    const tooltipClasses = classNames(
+      `${prefix}--icon-tooltip`,
+      `${prefix}--tag-label-tooltip`
+    );
+    const combinedRef = mergeRefs(tagRef, forwardRef);
+
+    if (isEllipsisApplied) {
+      return (
+        <Tooltip
+          label={text}
+          align="bottom"
+          className={tooltipClasses}
+          leaveDelayMs={0}
+          onMouseEnter={() => false}
+          closeOnActivation>
+          <Tag
+            ref={combinedRef}
+            type={type}
+            size={size}
+            renderIcon={renderIcon}
+            disabled={disabled}
+            className={tagClasses}
+            id={tagId}
+            {...other}>
+            <Text title={text} className={`${prefix}--tag__label`}>
+              {text}
+            </Text>
+          </Tag>
+        </Tooltip>
+      );
+    }
+
     return (
-      <Tooltip
-        label={text}
-        align="bottom"
-        className={tooltipClasses}
-        leaveDelayMs={0}
-        onMouseEnter={() => false}
-        closeOnActivation>
-        <Tag
-          ref={tagRef}
-          type={type}
-          size={size}
-          renderIcon={renderIcon}
-          disabled={disabled}
-          className={tagClasses}
-          id={tagId}
-          {...other}>
-          <Text title={text} className={`${prefix}--tag__label`}>
-            {text}
-          </Text>
-        </Tag>
-      </Tooltip>
+      <Tag
+        ref={combinedRef}
+        type={type}
+        size={size}
+        renderIcon={renderIcon}
+        disabled={disabled}
+        className={tagClasses}
+        id={tagId}
+        {...other}>
+        <Text title={text} className={`${prefix}--tag__label`}>
+          {text}
+        </Text>
+      </Tag>
     );
   }
-
-  return (
-    <Tag
-      ref={tagRef}
-      type={type}
-      size={size}
-      renderIcon={renderIcon}
-      disabled={disabled}
-      className={tagClasses}
-      id={tagId}
-      {...other}>
-      <Text title={text} className={`${prefix}--tag__label`}>
-        {text}
-      </Text>
-    </Tag>
-  );
-};
+);
 
 OperationalTag.propTypes = {
   /**

packages/react/src/components/Tag/Tag-test.js

@@ -292,4 +292,9 @@ describe('Tag', () => {
     expect(spy).toHaveBeenCalled();
     spy.mockRestore();
   });
+  it('supports a ref on the underlying button element', () => {
+    const ref = jest.fn();
+    render(<OperationalTag type="red" text="Test Tag" ref={ref} />);
+    expect(ref).toHaveBeenCalledWith(expect.any(HTMLButtonElement));
+  });
 });