fix: button popover won't close. fixes #2032 (#2050)

* fix: button popover won't close. fixes #2032

* Update src/block-components/icon/index.js [skip ci]

* Update src/block-components/link/index.js [skip ci]

Author: bfintal

src/block-components/icon/index.js

@@ -61,25 +61,35 @@ export const Icon = props => {
 		hasLinearGradient = true,
 	} = props
 
+	const { clientId, isSelected } = useBlockEditContext()
 	const [ isOpen, setIsOpen ] = useState( false )
 	const popoverEl = useRef( null )
 
 	const clickOutsideListener = useCallback( event => {
 		if ( isOpen ) {
+			// If the icon is clicked, just close the popover.
+			if ( event.target.closest( '.stk--inner-svg' ) ) {
+				event.stopPropagation()
+			}
 			if ( ! isElementDescendant( popoverEl.current, event.target ) && ! event.target.closest( '.components-popover' ) ) {
 				setIsOpen( false )
 			}
 		}
-	} )
+	}, [ popoverEl.current, isOpen ] )
+
+	// When the block is unselected, make sure that the popover is closed.
+	useEffect( () => {
+		if ( ! isSelected && isOpen ) {
+			setIsOpen( false )
+		}
+	}, [ isSelected, isOpen ] )
 
 	// Assign the outside click listener.
 	useEffect( () => {
 		document.body.addEventListener( 'click', clickOutsideListener )
 		return () => document.body.removeEventListener( 'click', clickOutsideListener )
 	}, [ clickOutsideListener ] )
 
-	const { clientId, isSelected } = useBlockEditContext()
-
 	// Enable editing of the icon only when the current block that implements
 	// it is selected. We need to use setTimeout since the isSelected is
 	// changed earlier.
@@ -141,7 +151,7 @@ export const Icon = props => {
 			onClick={ event => {
 				if ( debouncedIsSelected ) {
 					// Only register a click to .stk--inner-svg.
-					if ( event.target.closest( '.stk--inner-svg' ) ) {
+					if ( event.target.closest( '.stk--inner-svg' ) && ! isOpen ) {
 						setIsOpen( ! isOpen )
 					}
 				}

src/block-components/link/index.js

@@ -48,13 +48,24 @@ export const Link = props => {
 		return () => clearTimeout( t )
 	}, [ isSelected ] )
 
+	// If the block is unselected, make sure that the opopver is closed.
+	useEffect( () => {
+		if ( ! isSelected && isOpen ) {
+			setIsOpen( false )
+		}
+	}, [ isSelected, isOpen ] )
+
 	const clickOutsideListener = useCallback( event => {
 		if ( isOpen ) {
+			// If the button text is clicked, don't re-open the popover, just close it.
+			if ( event.target.closest( '.stk-button' ) && event.target.closest( props.linkTrigger || '.rich-text' ) ) {
+				event.stopPropagation()
+			}
 			if ( ! isElementDescendant( popoverEl.curent, event.target ) && ! event.target.closest( '.components-popover' ) ) {
 				setIsOpen( false )
 			}
 		}
-	}, [ popoverEl.current ] )
+	}, [ popoverEl.current, isOpen ] )
 
 	// Assign the outside click listener.
 	useEffect( () => {
@@ -78,8 +89,8 @@ export const Link = props => {
 				onClick={ e => {
 					if ( debouncedIsSelected ) {
 						const ref = e.target.closest( props.linkTrigger || '.rich-text' )
-						if ( ref ) {
-						// Only trigger the setIsOpen when the rich text is selected.
+						if ( ref && ! isOpen ) {
+							// Only trigger the setIsOpen when the rich text is selected.
 							setPopoverRef( ref )
 							setIsOpen( ! isOpen )
 						}