From c6f0ac0f444165b55e37873c80462401fd34f14f Mon Sep 17 00:00:00 2001
From: David Menendez <damenend@gmail.com>
Date: Tue, 10 Dec 2024 22:31:45 -0600
Subject: [PATCH] fix: remove tooltip from tagoverflow (#6463)

* fix: remove tooltip from tagoverflow

* chore: add test coverage

---------

Co-authored-by: Afsal K <makafsal@users.noreply.github.com>
---
 .../components/TagOverflow/TagOverflow.tsx    | 38 +++++++++----------
 .../src/components/TagSet/TagSet.test.js      | 18 +++++++++
 2 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/packages/ibm-products/src/components/TagOverflow/TagOverflow.tsx b/packages/ibm-products/src/components/TagOverflow/TagOverflow.tsx
index be17c635d2..ee592090a9 100644
--- a/packages/ibm-products/src/components/TagOverflow/TagOverflow.tsx
+++ b/packages/ibm-products/src/components/TagOverflow/TagOverflow.tsx
@@ -16,7 +16,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Tag, Tooltip, DismissibleTag } from '@carbon/react';
+import { Tag, DismissibleTag } from '@carbon/react';
 
 import PropTypes from 'prop-types';
 import { TYPES } from './constants';
@@ -279,25 +279,23 @@ export let TagOverflow = forwardRef(
               // If there is no template prop, then render items as Tags
               return (
                 <div ref={(node) => itemRefHandler(id, node)} key={id}>
-                  <Tooltip align={overflowAlign} label={label}>
-                    {typeof onClose === 'function' || filter ? (
-                      <DismissibleTag
-                        {...other}
-                        className={`${blockClass}__item--tag`}
-                        type={tagType}
-                        onClose={() => handleTagOnClose(onClose, index)}
-                        text={label}
-                      />
-                    ) : (
-                      <Tag
-                        {...other}
-                        className={`${blockClass}__item--tag`}
-                        type={tagType}
-                      >
-                        {label}
-                      </Tag>
-                    )}
-                  </Tooltip>
+                  {typeof onClose === 'function' || filter ? (
+                    <DismissibleTag
+                      {...other}
+                      className={`${blockClass}__item--tag`}
+                      type={tagType}
+                      onClose={() => handleTagOnClose(onClose, index)}
+                      text={label}
+                    />
+                  ) : (
+                    <Tag
+                      {...other}
+                      className={`${blockClass}__item--tag`}
+                      type={tagType}
+                    >
+                      {label}
+                    </Tag>
+                  )}
                 </div>
               );
             }
diff --git a/packages/ibm-products/src/components/TagSet/TagSet.test.js b/packages/ibm-products/src/components/TagSet/TagSet.test.js
index be6158f58f..bc43533a83 100644
--- a/packages/ibm-products/src/components/TagSet/TagSet.test.js
+++ b/packages/ibm-products/src/components/TagSet/TagSet.test.js
@@ -78,6 +78,24 @@ describe(TagSet.displayName, () => {
     warn.mockRestore();
   });
 
+  it('Displays a DismissibleTag when passed an onClose or filter', async () => {
+    const handler1 = jest.fn();
+    const handler2 = jest.fn();
+    render(
+      <TagSet
+        tags={[
+          { id: '1', label: 'Tag 1', filter: true, onClose: handler1 },
+          { id: '2', label: 'Tag 2', onClose: handler2 },
+        ]}
+      />
+    );
+    const visible = screen.getAllByLabelText('Dismiss');
+    await act(() => userEvent.click(visible[2]));
+    expect(handler1).toHaveBeenCalled();
+    await act(() => userEvent.click(visible[3]));
+    expect(handler2).toHaveBeenCalled();
+  });
+
   it('Has the same tag types as Carbon Tag', async () => {
     // Same number of tags
     expect(TagSet.types.length).toEqual(Object.keys(tagTypes).length);