fix: fixed #2635

Author: arnog

CHANGELOG.md

@@ -1,3 +1,11 @@
+## [Unreleased]
+
+### Issues Resolved
+
+- **#2635** In Chrome (and Firefox), clicking on the padding area of the
+  mathfield would not result in the focus getting into a zombie state and
+  keyboard event no longer being dispatched.
+
 ## 0.104.2 _2025-03-23_
 
 ### Issues Resolved

css/mathfield.less

@@ -110,7 +110,7 @@
   );
 }
 
-// prevent pointer-down event on touch devices if the host isn't focused
+// Prevent pointer-down event on touch devices if the host isn't focused
 // this allows scrolling if you touch unfocused fields
 @media (hover: none) and (pointer: coarse) {
   :host(:not(:focus)) .ML__container {

package.json

@@ -14,6 +14,13 @@
   "module": "./dist/mathlive.min.mjs",
   "main": "./dist/mathlive.min.js",
   "exports": {
+    "./vue": "./dist/vue-mathlive.mjs",
+    "./fonts.css": "./dist/mathlive-fonts.css",
+    "./static.css": "./dist/mathlive-static.css",
+    "./fonts/*": "./dist/fonts/*",
+    "./sounds/*": "./dist/sounds/*",
+    "./fonts/": "./dist/fonts/",
+    "./sounds/": "./dist/sounds/",
     ".": {
       "browser": {
         "production": {
@@ -40,14 +47,7 @@
     "./ssr": {
       "types": "./dist/types/mathlive-ssr.d.ts",
       "import": "./dist/mathlive-ssr.min.mjs"
-    },
-    "./vue": "./dist/vue-mathlive.mjs",
-    "./fonts.css": "./dist/mathlive-fonts.css",
-    "./static.css": "./dist/mathlive-static.css",
-    "./fonts/*": "./dist/fonts/*",
-    "./sounds/*": "./dist/sounds/*",
-    "./fonts/": "./dist/fonts/",
-    "./sounds/": "./dist/sounds/"
+    }
   },
   "repository": {
     "type": "git",

src/editor-mathfield/mathfield-private.ts

@@ -1308,9 +1308,8 @@ If you are using Vue, this may be because you are using the runtime-only build o
   }
 
   focus(options?: FocusOptions): void {
+    if (this.focusBlurInProgress) return;
     if (!this.hasFocus()) {
-      this.keyboardDelegate.focus();
-      this.connectToVirtualKeyboard();
       this.onFocus();
       this.model.announce('line');
     }
@@ -1650,14 +1649,8 @@ If you are using Vue, this may be because you are using the runtime-only build o
     this.focusBlurInProgress = true;
     this.blurred = false;
 
-    // As a side effect, a `focus` and `focusin` events will be dispatched
-    // @fixme: this call might not be necessary. There is a keyboardDelegate.focus() call in the focus() handler.
-    this.keyboardDelegate.focus();
-
     this.stopCoalescingUndo();
 
-    render(this, { interactive: true });
-
     // Save the current value.
     // It will be compared in `onBlur()` to see if the
     // `change` event needs to be dispatched. This
@@ -1672,7 +1665,14 @@ If you are using Vue, this may be because you are using the runtime-only build o
     )
       this.executeCommand('moveToNextPlaceholder');
 
-    this.focusBlurInProgress = false;
+    render(this, { interactive: true });
+
+    setTimeout(() => {
+      this.keyboardDelegate.blur();
+      this.keyboardDelegate.focus();
+      this.connectToVirtualKeyboard();
+      this.focusBlurInProgress = false;
+    }, 60);
   }
 
   onBlur(): void {

src/editor/keyboard.ts

@@ -309,12 +309,19 @@ export function delegateKeyboardEvents(
     },
 
     blur: (): void => {
-      if (typeof keyboardSink.blur === 'function') keyboardSink.blur();
+      if (typeof keyboardSink.blur === 'function') {
+        blurInProgress = true;
+        keyboardSink.blur();
+        blurInProgress = false;
+      }
     },
 
     focus: (): void => {
-      if (!focusInProgress && typeof keyboardSink.focus === 'function')
+      if (!focusInProgress && typeof keyboardSink.focus === 'function') {
+        focusInProgress = true;
         keyboardSink.focus({ preventScroll: true });
+        focusInProgress = false;
+      }
     },
 
     hasFocus: (): boolean => {

src/public/mathfield-element.ts

@@ -1916,13 +1916,22 @@ import "https://unpkg.com/@cortex-js/compute-engine?module";
   handleEvent(evt: Event): void {
     // If the scrim for the variant panel or the menu is
     // open, ignore events.
-    // Otherwise we may end up disconecting from the VK
+    // Otherwise we may end up disconnecting from the VK
     if (Scrim.state !== 'closed') return;
 
     // Also, if the menu is open
     if (this._mathfield?.menu?.state !== 'closed') return;
 
-    if (evt.type === 'pointerdown') this.onPointerDown();
+    if (evt.type === 'pointerdown') {
+      this.onPointerDown();
+      // Some browsers (Firefox, Chrome) will get into a zombie focus state
+      // if the padding area is clicked on when the mathfield was already
+      // focused. We force the keyboard delegate to blur and refocus to
+      // prevent this.
+      const kbdDelegate = this._mathfield?.keyboardDelegate;
+      kbdDelegate?.blur();
+      kbdDelegate?.focus();
+    }
     if (evt.type === 'focus') this._mathfield?.focus();
 
     // Ignore blur events if the scrim is open (case where the variant panel
@@ -1958,6 +1967,15 @@ import "https://unpkg.com/@cortex-js/compute-engine?module";
     host.addEventListener('focus', this, true);
     host.addEventListener('blur', this, true);
 
+    shadowRoot.addEventListener('pointerdown', (evt) => {
+      console.log('blue', evt);
+      evt.preventDefault();
+
+      // console.log('current target', deepActiveElement());
+
+      // if (evt.target === this) this.focus();
+    });
+
     // Create an observer instance to detect when the innerHTML or textContent
     // of the element is modified
     this._observer = new MutationObserver(() => {

test/smoke/index.html

@@ -44,7 +44,7 @@ <h1>Smoke Test</h1>
   </header>
   <main>
 
-    <math-field id="mf">\sqrt{a+1}</math-field>
+    <math-field id="mf" contenteditable="true" tabindex="0">\sqrt{a+1}</math-field>
 
     <!-- <math-field id="mf">\begin{align}\sqrt{a} +
       1 & b + 234 \\ \sqrt{c} + 1234 & d + 12345\end{align}
@@ -127,6 +127,7 @@ <h2>MathML</h2>
       version,
     } from "https://esm.run/@cortex-js/compute-engine";
 
+    // MathfieldElement.fontsDirectory = "https://unpkg.com/mathlive/dist/fonts";
 
 
     const MAX_LINE_LENGTH = 74;
@@ -259,6 +260,8 @@ <h2>MathML</h2>
 
 
     mf.addEventListener('mount', () => {
+      // MathfieldElement.fontsDirectory = "https://cdn.jsdelivr.net/npm/mathlive/dist/fonts";
+
       mf.macros = {
         ...mf.macros,
         atomic: { args: 1, def: '\\class{my-class}{#1}', captureSelection: true },
@@ -269,7 +272,6 @@ <h2>MathML</h2>
       // First time update
       updateContent(mf);
       mf.addEventListener("input", (ev) => {
-        console.log(ev);
         updateContent(mf)
       });