fix: when dynamically resizing the mathfield, update the selection re…

…ctangles
arnog · Dec 6, 2023 · ce9b053 · ce9b053
1 parent 42518c4
commit ce9b053
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/src/editor-mathfield/mathfield-private.ts b/src/editor-mathfield/mathfield-private.ts
@@ -204,6 +204,7 @@ export class _Mathfield implements Mathfield, KeyboardDelegateInterface {
   private connectedToVirtualKeyboard: boolean;
 
   private eventController: AbortController;
+  private resizeObserver: ResizeObserver;
 
   /**
    *
@@ -444,10 +445,13 @@ If you are using Vue, this may be because you are using the runtime-only build o
     // to adjust the UI (popover, etc...)
     window.addEventListener('resize', this, { signal });
     document.addEventListener('scroll', this, { signal });
+    this.resizeObserver = new ResizeObserver(() => requestUpdate(this));
+    this.resizeObserver.observe(this.field);
 
     window.mathVirtualKeyboard.addEventListener(
       'virtual-keyboard-toggle',
-      this
+      this,
+      { signal }
     );
 
     if (gKeyboardLayout && !l10n.locale.startsWith(gKeyboardLayout.locale))
@@ -901,6 +905,8 @@ If you are using Vue, this may be because you are using the runtime-only build o
     this.eventController.abort();
     (this as any).eventController = undefined;
 
+    this.resizeObserver.disconnect();
+
     window.mathVirtualKeyboard.removeEventListener(
       'virtual-keyboard-toggle',
       this
@@ -1705,7 +1711,7 @@ If you are using Vue, this may be because you are using the runtime-only build o
               )
                 this.focus({ preventScroll: true });
             },
-            { once: true }
+            { once: true, signal }
           );
         }
       },