fix: detect focus change even when the mathfield is in another component

arnog · Dec 8, 2023 · c04421f · c04421f
1 parent 43f90c2
commit c04421f
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,9 @@
 - **#2194** Ignore long press events when the pointer is a mouse.
 - Improved contrast calculation for the checkmarks over color swatches, now
   using APCA.
+- In some situations, the virtual keyboard would not be displayed when
+  the mathfield was focused and the `mathVirtualKeyboardPolicy` was set
+  to `"auto"`.
 
 ### Bugs Fixed
 

diff --git a/src/public/mathfield-element.ts b/src/public/mathfield-element.ts
@@ -1180,7 +1180,7 @@ export class MathfieldElement extends HTMLElement implements Mathfield {
           'color:#db1111; font-size: 1.1rem'
         );
         console.warn(
-          `Some of the options passed to \`new MathFieldElement(...)\` are invalid. 
+          `Some of the options passed to \`new MathfieldElement(...)\` are invalid. 
           See https://cortexjs.io/mathlive/changelog/ for details.`
         );
         for (const warning of warnings) console.warn(warning);

diff --git a/src/virtual-keyboard/virtual-keyboard.ts b/src/virtual-keyboard/virtual-keyboard.ts
@@ -34,6 +34,7 @@ import {
 
 import { hideVariantsPanel, showVariantsPanel } from './variants';
 import { Style } from '../public/core-types';
+import { deepActiveElement } from 'ui/events/utils';
 
 export class VirtualKeyboard implements VirtualKeyboardInterface, EventTarget {
   private _visible: boolean;
@@ -283,36 +284,31 @@ export class VirtualKeyboard implements VirtualKeyboardInterface, EventTarget {
       window.addEventListener('message', this);
     }
 
+    // Listen for when a mathfield gets focused, and show
+    // the virtual keyboard if needed
     document.body.addEventListener('focusin', (event: FocusEvent) => {
       const target = event.target as HTMLElement;
-      if (
-        target?.isConnected &&
-        target.tagName?.toLowerCase() === 'math-field' &&
-        isTouchCapable()
-      ) {
-        const mf = target as MathfieldElement;
-        if (mf.mathVirtualKeyboardPolicy === 'auto' && !mf.readOnly)
+      if (!target?.isConnected) return;
+      setTimeout(() => {
+        const mf = focusedMathfield();
+        if (
+          mf &&
+          !mf.readOnly &&
+          mf.mathVirtualKeyboardPolicy === 'auto' &&
+          isTouchCapable()
+        )
           this.show({ animate: true });
-      }
+      }, 300);
     });
 
     document.addEventListener('focusout', (evt) => {
       const target = evt.target as MathfieldElement;
       if (target.mathVirtualKeyboardPolicy !== 'manual') {
         // If after a short delay the active element is no longer
-        // a mathfield (or there is no active element),
-        // hide the virtual keyboard
+        // a mathfield (or there is no active element), hide the virtual keyboard
+
         setTimeout(() => {
-          let target = document.activeElement;
-          let focusedMathfield = false;
-          while (target) {
-            if (target.tagName?.toLowerCase() === 'math-field') {
-              focusedMathfield = true;
-              break;
-            }
-            target = target.shadowRoot?.activeElement ?? null;
-          }
-          if (!focusedMathfield) this.hide();
+          if (!focusedMathfield()) this.hide();
         }, 300);
       }
     });
@@ -866,3 +862,19 @@ export class VirtualKeyboard implements VirtualKeyboardInterface, EventTarget {
     window.removeEventListener('message', this);
   }
 }
+
+function focusedMathfield(): MathfieldElement | null {
+  let target: Node | null = deepActiveElement() as Node | null;
+  let mf: MathfieldElement | null = null;
+  while (target) {
+    if (
+      'host' in target &&
+      (target.host as HTMLElement)?.tagName?.toLowerCase() === 'math-field'
+    ) {
+      mf = target.host as MathfieldElement;
+      break;
+    }
+    target = target.parentNode;
+  }
+  return mf;
+}
diff --git a/test/smoke/index.html b/test/smoke/index.html
@@ -9,6 +9,9 @@
     />
     <link rel="stylesheet" href="../style.css" />
     <link rel="icon" href="data:," />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/codemirror.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/mode/javascript/javascript.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/mode/xml/xml.min.js"></script>
     <style>
       math-field {
         border: 1px solid var(--editable-border);
@@ -57,7 +60,16 @@ <h1>Smoke Test</h1>
     </header>
     <main>
       <!-- <div style="transform: scale(2) translate(30%, 30%)"> -->
-      <math-field id="mf" name="formula"> </math-field>
+      <math-field id="mf" name="formula"
+        >$$
+        \textcolor{red}{asd}\textcolor{orange}{asd}\textcolor{yellow}{asd}\textcolor{lime}{asd}\textcolor{green}{asd}\textcolor{teal}{asd}\textcolor{blue}{asd}\textcolor{cyan}{asd}\textcolor{indigo}{asd}\textcolor{purple}{s}\textcolor{magenta}{s}\textcolor{black}{s}s\textcolor{grey}{d}dd\textcolor{white}{d}dd\textcolor{dark-grey}{asd}\textcolor{light-grey}{asd}
+        $$
+      </math-field>
+      <code-playground>
+        <pre slot="html">
+&lt;math-field&gt;x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}&lt;/math-field&gt;</pre
+        >
+      </code-playground>
       <!-- </div> -->
       <!-- <math-field id="mf"
         >\mathrm{Hypot}\left(\textcolor{red}{#?},{#?}\right)</math-field
@@ -119,6 +131,8 @@ <h2>Latex to Speakable Text</h2>
         convertLatexToSpeakableText,
       } from "/dist/mathlive.mjs";
 
+      import "https://unpkg.com/@ui-js/code-playground";
+
       import {
         ComputeEngine,
         version,
@@ -214,6 +228,7 @@ <h2>Latex to Speakable Text</h2>
       // ];
 
       const mf = document.getElementById("mf");
+
       // MathfieldElement.locale = "he";
 
       // const menuItems = mf.menuItems;