Made TagCloseButton a forwardRef (#6707)

Co-authored-by: Jake Chapman <jake.chapman@mark43.com>
Co-authored-by: Segun Adebayo <joseshegs@gmail.com>

.changeset/silent-walls-study.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/tag": patch
+---
+
+Use `forwardRef` with `TagCloseButton`

packages/components/tag/src/tag.tsx

@@ -90,30 +90,33 @@ export interface TagCloseButtonProps
  * TagCloseButton is used to close "remove" the tag
  * @see Docs https://chakra-ui.com/tag
  */
-export const TagCloseButton: React.FC<TagCloseButtonProps> = (props) => {
-  const { isDisabled, children, ...rest } = props
-
-  const styles = useTagStyles()
-
-  const btnStyles: SystemStyleObject = {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    outline: "0",
-    ...styles.closeButton,
-  }
-
-  return (
-    <chakra.button
-      aria-label="close"
-      {...rest}
-      type="button"
-      disabled={isDisabled}
-      __css={btnStyles}
-    >
-      {children || <TagCloseIcon />}
-    </chakra.button>
-  )
-}
+export const TagCloseButton = forwardRef<TagCloseButtonProps, "button">(
+  (props, ref) => {
+    const { isDisabled, children, ...rest } = props
+
+    const styles = useTagStyles()
+
+    const btnStyles: SystemStyleObject = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      outline: "0",
+      ...styles.closeButton,
+    }
+
+    return (
+      <chakra.button
+        ref={ref}
+        aria-label="close"
+        {...rest}
+        type="button"
+        disabled={isDisabled}
+        __css={btnStyles}
+      >
+        {children || <TagCloseIcon />}
+      </chakra.button>
+    )
+  },
+)
 
 TagCloseButton.displayName = "TagCloseButton"