fix(Tag): render button when nonfilter tag is interactive

carbon-design-system · Mar 2, 2021 · 248029e · 248029e
1 parent 62deccf
commit 248029e
Showing 1 changed file with 34 additions and 28 deletions.
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
@@ -56,33 +56,39 @@ const Tag = ({
     }
   };
 
-  return filter ? (
-    <div
-      className={tagClasses}
-      aria-label={
-        title !== undefined
-          ? `${title} ${children}`
-          : `Clear filter ${children}`
-      }
-      id={tagId}
-      {...other}>
-      <span
-        className={`${prefix}--tag__label`}
-        title={typeof children === 'string' ? children : null}>
-        {children !== null && children !== undefined ? children : TYPES[type]}
-      </span>
-      <button
-        type="button"
-        className={`${prefix}--tag__close-icon`}
-        onClick={handleClose}
-        disabled={disabled}
-        aria-labelledby={tagId}
-        title={title}>
-        <Close16 />
-      </button>
-    </div>
-  ) : (
-    <div className={tagClasses} id={tagId} {...other}>
+  if (filter) {
+    return (
+      <div
+        className={tagClasses}
+        aria-label={
+          title !== undefined
+            ? `${title} ${children}`
+            : `Clear filter ${children}`
+        }
+        id={tagId}
+        {...other}>
+        <span
+          className={`${prefix}--tag__label`}
+          title={typeof children === 'string' ? children : null}>
+          {children !== null && children !== undefined ? children : TYPES[type]}
+        </span>
+        <button
+          type="button"
+          className={`${prefix}--tag__close-icon`}
+          onClick={handleClose}
+          disabled={disabled}
+          aria-labelledby={tagId}
+          title={title}>
+          <Close16 />
+        </button>
+      </div>
+    );
+  }
+
+  const ComponentTag = other.onClick ? 'button' : 'div';
+
+  return (
+    <ComponentTag className={tagClasses} id={tagId} {...other}>
       {CustomIconElement ? (
         <div className={`${prefix}--tag__custom-icon`}>
           <CustomIconElement />
@@ -93,7 +99,7 @@ const Tag = ({
       <span title={typeof children === 'string' ? children : null}>
         {children !== null && children !== undefined ? children : TYPES[type]}
       </span>
-    </div>
+    </ComponentTag>
   );
 };