Merge pull request #2933 from pie-framework/fix/PD-5638-version2

fix(multiple-choice, placement-ordering): use observer to render math…

Author: CarlaCostea

packages/multiple-choice/src/index.js

@@ -55,6 +55,8 @@ export default class MultipleChoice extends HTMLElement {
     this._keyboardEventsEnabled = false;
     this._audioInitialized = false;
     this._root = null;
+    this._mathObserver = null;
+    this._mathRenderPending = false;
 
     this._rerender = debounce(
       () => {
@@ -75,15 +77,12 @@ export default class MultipleChoice extends HTMLElement {
           this.setAttribute('role', 'region');
           this.setLangAttribute();
 
+          this._initMathObserver();
+
           if (!this._root) {
             this._root = createRoot(this);
           }
           this._root.render(element);
-          // Use requestAnimationFrame to ensure DOM is fully painted before rendering math
-          requestAnimationFrame(() => {
-            log('render complete - render math');
-            renderMath(this);
-          });
 
           if (this._model.keyboardEventsEnabled === true && !this._keyboardEventsEnabled) {
             this.enableKeyboardEvents();
@@ -120,6 +119,38 @@ export default class MultipleChoice extends HTMLElement {
     );
   }
 
+  _scheduleMathRender = () => {
+    if (this._mathRenderPending) return;
+    this._mathRenderPending = true;
+
+    requestAnimationFrame(() => {
+      if (this._mathObserver) {
+        this._mathObserver.disconnect();
+      }
+      log('render complete - render math');
+      renderMath(this);
+      this._mathRenderPending = false;
+      setTimeout(() => {
+        if (this._mathObserver) {
+          this._mathObserver.observe(this, { childList: true, subtree: true });
+        }
+      }, 50);
+    });
+  };
+
+  _initMathObserver() {
+    if (this._mathObserver) return;
+    this._mathObserver = new MutationObserver(this._scheduleMathRender);
+    this._mathObserver.observe(this, { childList: true, subtree: true });
+  }
+
+  _disconnectMathObserver() {
+    if (this._mathObserver) {
+      this._mathObserver.disconnect();
+      this._mathObserver = null;
+    }
+  }
+
   onShowCorrectToggle() {
     renderMath(this);
   }
@@ -192,6 +223,7 @@ export default class MultipleChoice extends HTMLElement {
   }
 
   connectedCallback() {
+    this._initMathObserver();
     this._rerender();
 
     // Observation:  audio in Chrome will have the autoplay attribute,
@@ -281,6 +313,7 @@ export default class MultipleChoice extends HTMLElement {
   }
 
   disconnectedCallback() {
+    this._disconnectMathObserver();
     if (this._keyboardEventsEnabled) {
       window.removeEventListener('keydown', this._boundHandleKeyDown);
       this._keyboardEventsEnabled = false;

packages/multiple-choice/src/print.js

@@ -68,11 +68,12 @@ export default class MultipleChoicePrint extends HTMLElement {
             this._root = createRoot(this);
           }
           this._root.render(element);
-          // Use requestAnimationFrame to ensure DOM is fully painted before rendering math
-          // This is especially important for nested components like PreviewPrompt (rationale, choice labels)
+          // Use double requestAnimationFrame so React has committed to the DOM before we render math
           requestAnimationFrame(() => {
-            log('render complete - render math');
-            renderMath(this);
+            requestAnimationFrame(() => {
+              log('render complete - render math');
+              renderMath(this);
+            });
           });
         } else {
           log('skip');

packages/placement-ordering/src/index.js

@@ -23,6 +23,39 @@ export default class Ordering extends HTMLElement {
   constructor() {
     super();
     this._root = null;
+    this._mathObserver = null;
+    this._mathRenderPending = false;
+  }
+
+  _scheduleMathRender = () => {
+    if (this._mathRenderPending) return;
+    this._mathRenderPending = true;
+
+    requestAnimationFrame(() => {
+      if (this._mathObserver) {
+        this._mathObserver.disconnect();
+      }
+      renderMath(this);
+      this._mathRenderPending = false;
+      setTimeout(() => {
+        if (this._mathObserver) {
+          this._mathObserver.observe(this, { childList: true, subtree: true });
+        }
+      }, 50);
+    });
+  };
+
+  _initMathObserver() {
+    if (this._mathObserver) return;
+    this._mathObserver = new MutationObserver(this._scheduleMathRender);
+    this._mathObserver.observe(this, { childList: true, subtree: true });
+  }
+
+  _disconnectMathObserver() {
+    if (this._mathObserver) {
+      this._mathObserver.disconnect();
+      this._mathObserver = null;
+    }
   }
 
   isComplete = (value) => value && compact(value).length === this._model.completeLength;
@@ -63,6 +96,8 @@ export default class Ordering extends HTMLElement {
       log('[render] session: ', this._session.value);
       log('[render] model: ', this._model);
 
+      this._initMathObserver();
+
       const element = React.createElement(Main, {
         model: this._model,
         session: this._session,
@@ -73,13 +108,15 @@ export default class Ordering extends HTMLElement {
         this._root = createRoot(this);
       }
       this._root.render(element);
-      queueMicrotask(() => {
-        renderMath(this);
-      });
     }
   }
 
+  connectedCallback() {
+    this._initMathObserver();
+  }
+
   disconnectedCallback() {
+    this._disconnectMathObserver();
     if (this._root) {
       this._root.unmount();
     }