From 15dc8efe3a2874a716d1fa4f944fa36d2875f785 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Fri, 6 May 2022 16:10:21 -0400 Subject: [PATCH 1/4] fix(Popper): update Popper modifiers when child DOM changes --- packages/react-core/src/helpers/Popper/Popper.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/react-core/src/helpers/Popper/Popper.tsx b/packages/react-core/src/helpers/Popper/Popper.tsx index 0341f325dce..00f1b851b6b 100644 --- a/packages/react-core/src/helpers/Popper/Popper.tsx +++ b/packages/react-core/src/helpers/Popper/Popper.tsx @@ -165,6 +165,10 @@ export const Popper: React.FunctionComponent = ({ element.removeEventListener(event, listener); } }; + const observer = new MutationObserver(() => { + update && update(); + }); + React.useEffect(() => { addEventListener(onMouseEnter, refOrTrigger, 'mouseenter'); addEventListener(onMouseLeave, refOrTrigger, 'mouseleave'); @@ -175,6 +179,7 @@ export const Popper: React.FunctionComponent = ({ addEventListener(onPopperClick, popperElement, 'click'); onDocumentClick && addEventListener(onDocumentClickCallback, document, 'click'); addEventListener(onDocumentKeyDown, document, 'keydown'); + popperElement && observer.observe(popperElement, { attributes: true, childList: true, subtree: true }); return () => { removeEventListener(onMouseEnter, refOrTrigger, 'mouseenter'); removeEventListener(onMouseLeave, refOrTrigger, 'mouseleave'); @@ -185,6 +190,7 @@ export const Popper: React.FunctionComponent = ({ removeEventListener(onPopperClick, popperElement, 'click'); onDocumentClick && removeEventListener(onDocumentClickCallback, document, 'click'); removeEventListener(onDocumentKeyDown, document, 'keydown'); + observer.disconnect(); }; }, [ triggerElement, @@ -233,7 +239,7 @@ export const Popper: React.FunctionComponent = ({ [popperMatchesTriggerWidth] ); - const { styles: popperStyles, attributes, forceUpdate } = usePopper(refOrTrigger, popperElement, { + const { styles: popperStyles, attributes, update } = usePopper(refOrTrigger, popperElement, { placement: getPlacementMemo, modifiers: [ { @@ -262,12 +268,6 @@ export const Popper: React.FunctionComponent = ({ ] }); - // force update when content changes - // https://github.com/patternfly/patternfly-react/issues/5620 - React.useEffect(() => { - forceUpdate && forceUpdate(); - }, [popper]); - // Returns the CSS modifier class in order to place the Popper's arrow properly // Depends on the position of the Popper relative to the reference element const modifierFromPopperPosition = () => { From 4e139ef70492458f69b8143f1eafc02160cd9bdf Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Fri, 6 May 2022 16:20:45 -0400 Subject: [PATCH 2/4] update comments --- packages/react-core/src/helpers/Popper/Popper.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-core/src/helpers/Popper/Popper.tsx b/packages/react-core/src/helpers/Popper/Popper.tsx index 00f1b851b6b..ad8119c6f42 100644 --- a/packages/react-core/src/helpers/Popper/Popper.tsx +++ b/packages/react-core/src/helpers/Popper/Popper.tsx @@ -165,6 +165,10 @@ export const Popper: React.FunctionComponent = ({ element.removeEventListener(event, listener); } }; + + // Obeserver added to address https://github.com/patternfly/patternfly-react/issues/7162 + // and trigger a Popper update when content changes. + // Also accounts for https://github.com/patternfly/patternfly-react/issues/5620 const observer = new MutationObserver(() => { update && update(); }); From 039a26ae18b6d7065eded1359887582844fd8b35 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Fri, 6 May 2022 16:57:09 -0400 Subject: [PATCH 3/4] fix build error --- packages/react-core/src/helpers/Popper/Popper.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/react-core/src/helpers/Popper/Popper.tsx b/packages/react-core/src/helpers/Popper/Popper.tsx index ad8119c6f42..33d7e8a7ee4 100644 --- a/packages/react-core/src/helpers/Popper/Popper.tsx +++ b/packages/react-core/src/helpers/Popper/Popper.tsx @@ -166,13 +166,6 @@ export const Popper: React.FunctionComponent = ({ } }; - // Obeserver added to address https://github.com/patternfly/patternfly-react/issues/7162 - // and trigger a Popper update when content changes. - // Also accounts for https://github.com/patternfly/patternfly-react/issues/5620 - const observer = new MutationObserver(() => { - update && update(); - }); - React.useEffect(() => { addEventListener(onMouseEnter, refOrTrigger, 'mouseenter'); addEventListener(onMouseLeave, refOrTrigger, 'mouseleave'); @@ -183,7 +176,15 @@ export const Popper: React.FunctionComponent = ({ addEventListener(onPopperClick, popperElement, 'click'); onDocumentClick && addEventListener(onDocumentClickCallback, document, 'click'); addEventListener(onDocumentKeyDown, document, 'keydown'); + + // Obeserver added to address https://github.com/patternfly/patternfly-react/issues/7162 + // and trigger a Popper update when content changes. + // Also accounts for https://github.com/patternfly/patternfly-react/issues/5620 + const observer = new MutationObserver(() => { + update && update(); + }); popperElement && observer.observe(popperElement, { attributes: true, childList: true, subtree: true }); + return () => { removeEventListener(onMouseEnter, refOrTrigger, 'mouseenter'); removeEventListener(onMouseLeave, refOrTrigger, 'mouseleave'); From e5220654f9f6294b73339d030548ada1c7b7ddd3 Mon Sep 17 00:00:00 2001 From: nicolethoen Date: Mon, 9 May 2022 12:08:49 -0400 Subject: [PATCH 4/4] udpate comment --- packages/react-core/src/helpers/Popper/Popper.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react-core/src/helpers/Popper/Popper.tsx b/packages/react-core/src/helpers/Popper/Popper.tsx index 33d7e8a7ee4..9d1a4235c88 100644 --- a/packages/react-core/src/helpers/Popper/Popper.tsx +++ b/packages/react-core/src/helpers/Popper/Popper.tsx @@ -177,9 +177,7 @@ export const Popper: React.FunctionComponent = ({ onDocumentClick && addEventListener(onDocumentClickCallback, document, 'click'); addEventListener(onDocumentKeyDown, document, 'keydown'); - // Obeserver added to address https://github.com/patternfly/patternfly-react/issues/7162 - // and trigger a Popper update when content changes. - // Also accounts for https://github.com/patternfly/patternfly-react/issues/5620 + // Trigger a Popper update when content changes. const observer = new MutationObserver(() => { update && update(); });