WRR-16145: ContextualPopupDecorator: Modified to update position when…

… DOM tree changes

Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com)

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);