diff --git a/packages/ibm-products/src/components/TagSet/TagSet.js b/packages/ibm-products/src/components/TagSet/TagSet.js index 4d5d98d699..dafb5c0f4d 100644 --- 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) => ( - + ? tags.map(({ label, onClose, ...other }, index) => ( + handleTagOnClose(onClose, index)} + > {label} )) @@ -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 index 45177db8c6..ff49d8344d 100644 --- 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 */