fix(TagSet): close tag set overflow upon displayed tag onClose bein…

…g called (carbon-design-system#3997) * fix(TagSet): close popover upon displayed tag onClose * chore: update copyright header * chore: move logic to handler
makafsal · Jan 24, 2024 · 56c8bb2 · 56c8bb2
1 parent d5dc4e7
commit 56c8bb2
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 7 deletions.
diff --git a/packages/ibm-products/src/components/TagSet/TagSet.js b/packages/ibm-products/src/components/TagSet/TagSet.js
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2023
+// Copyright IBM Corp. 2020, 2024
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -69,6 +69,8 @@ export let TagSet = React.forwardRef(
     const [sizingTags, setSizingTags] = useState([]);
     const overflowTag = useRef(null);
 
+    const [popoverOpen, setPopoverOpen] = useState(false);
+
     const handleShowAllClick = () => {
       setShowAllModalOpen(true);
     };
@@ -99,12 +101,26 @@ export let TagSet = React.forwardRef(
       setSizingTags(newSizingTags);
     }, [tags]);
 
+    const handleTagOnClose = useCallback(
+      (onClose, index) => {
+        onClose?.();
+        if (index <= displayCount - 1) {
+          setPopoverOpen(false);
+        }
+      },
+      [displayCount]
+    );
+
     useEffect(() => {
       // create visible and overflow tags
       let newDisplayedTags =
         tags && tags.length > 0
-          ? tags.map(({ label, ...other }, index) => (
-              <Tag {...other} key={`displayed-tag-${index}`}>
+          ? tags.map(({ label, onClose, ...other }, index) => (
+              <Tag
+                {...other}
+                key={`displayed-tag-${index}`}
+                onClose={() => handleTagOnClose(onClose, index)}
+              >
                 {label}
               </Tag>
             ))
@@ -134,6 +150,8 @@ export let TagSet = React.forwardRef(
           showAllTagsLabel={showAllTagsLabel}
           key="displayed-tag-overflow"
           ref={overflowTag}
+          popoverOpen={popoverOpen}
+          setPopoverOpen={setPopoverOpen}
         />
       );
 
@@ -145,6 +163,8 @@ export let TagSet = React.forwardRef(
       overflowType,
       showAllTagsLabel,
       tags,
+      popoverOpen,
+      handleTagOnClose,
     ]);
 
     const checkFullyVisibleTags = useCallback(() => {

diff --git a/packages/ibm-products/src/components/TagSet/TagSetOverflow.js b/packages/ibm-products/src/components/TagSet/TagSetOverflow.js
@@ -1,11 +1,11 @@
 //
-// Copyright IBM Corp. 2021, 2022
+// Copyright IBM Corp. 2021, 2024
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
-import React, { useState, useRef } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import cx from 'classnames';
@@ -36,13 +36,13 @@ export const TagSetOverflow = React.forwardRef(
       overflowTags,
       overflowType,
       showAllTagsLabel,
-
+      popoverOpen,
+      setPopoverOpen,
       // Collect any other property values passed in.
       ...rest
     },
     ref
   ) => {
-    const [popoverOpen, setPopoverOpen] = useState(false);
     const localRef = useRef();
     const overflowTagContent = useRef(null);
 
@@ -182,6 +182,14 @@ TagSetOverflow.propTypes = {
    * Type of rendering displayed inside of the tag overflow component
    */
   overflowType: PropTypes.oneOf(['default', 'tag']),
+  /**
+   * Open state of the popover
+   */
+  popoverOpen: PropTypes.bool,
+  /**
+   * Setter function for the popoverOpen state value
+   */
+  setPopoverOpen: PropTypes.func,
   /**
    * label for the overflow show all tags link
    */