diff --git a/ContextualPopupDecorator/ContextualPopupDecorator.js b/ContextualPopupDecorator/ContextualPopupDecorator.js index d3bb7ca85a..fcc25e868d 100644 --- a/ContextualPopupDecorator/ContextualPopupDecorator.js +++ b/ContextualPopupDecorator/ContextualPopupDecorator.js @@ -1,4 +1,4 @@ -/* global ResizeObserver */ +/* global MutationObserver ResizeObserver */ /** * A higher-order component to add a Sandstone styled popup to a component. @@ -301,6 +301,12 @@ const Decorator = hoc(defaultConfig, (config, Wrapped) => { this.positionContextualPopup(); }); } + + if (typeof MutationObserver === 'function') { + this.mutationObserver = new MutationObserver(() => { + this.positionContextualPopup(); + }); + } } getSnapshotBeforeUpdate (prevProps, prevState) { @@ -355,6 +361,11 @@ const Decorator = hoc(defaultConfig, (config, Wrapped) => { this.resizeObserver.disconnect(); this.resizeObserver = null; } + + if (this.mutationObserver) { + this.mutationObserver.disconnect(); + this.mutationObserver = null; + } } generateId = () => { @@ -619,6 +630,14 @@ const Decorator = hoc(defaultConfig, (config, Wrapped) => { this.resizeObserver.disconnect(); } } + + if (this.mutationObserver) { + if (node) { + this.mutationObserver.observe(document.body, {attributes: true, childList: true, subtree: true}); + } else { + this.mutationObserver.disconnect(); + } + } }; handle = handle.bind(this);