Repository: arnog/mathlive

Issue #2635: Typing text into math field doesn't work on Chrome v133+
Created: 2025-03-19T21:12:48Z
Description
On Chrome v133+, clicking anywhere on the math field besides the zone marked by the .ML__container class causes typed text to not appear in the text box.
NoteAt the bottom of this issue, I've provided some debugging code to determine whether this is a Chrome-specific issue.

Steps to Reproduce

Open Chrome v133+ on macos or Windows and visit the mathlive demo page.
Click anywhere on the math field that isn't within the zone marked by .ML__container e.g. this could be padding around this zone, or the keyboard toggle (see screenshot below).
Confirm the text box receives focus. In the case of clicking the toggle, the virtual keyboard should also be visible.
Try to type some text.




Examples of where to click








Actual Behavior
The text doesn't appear in the math field.
On closer inspection, it seems like the onPointerDown method doesn't get called:

  
    
      mathlive/src/editor-mathfield/pointer-input.ts
    
    
         Line 69
      in
      6fcdb9f
    
  
  
    

        
          
           export function onPointerDown(mathfield: _Mathfield, evt: PointerEvent): void { 
        
    
  


Hence, the call to mathfield.flushInlineShortcutBuffer() isn't made so each additional typed character just keeps accumulating in the keystrokes buffer:

  
    
      mathlive/src/editor-mathfield/mathfield-private.ts
    
    
        Lines 912 to 917
      in
      9651695
    
  
  
    

        
          
           if (!options.defer) { 
        

        
          
             this.inlineShortcutBuffer = []; 
        

        
          
             clearTimeout(this.inlineShortcutBufferFlushTimer); 
        

        
          
             this.inlineShortcutBufferFlushTimer = 0; 
        

        
          
             return; 
        

        
          
           } 
        
    
  


What's interesting is that pointer events seem to be firing as expected, but the onPointerDown method just doesn't get invoked for some reason.
Expected Behavior
The typed text should appear in the math field.
If you instead click inside the .ML__container zone, you'll see that the onPointerDown method does get called and the typed text does appear.
Environment
Mathlive versions tested: 0.101.0 to 0.104.1
Browser versions with bug:

macOS/Windows Chrome 133+
macos/Windows Edge 133+

Browser versions without bug:

macOS/Windows Safari and Firefox

Debugging
Debug mathlive
The following code was used to test different mathlive versions:

Show code
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Debug Mathlive</title>
    <link rel="stylesheet" href="styles.css" />
    <script defer src="//unpkg.com/mathlive@0.101.0"></script>
    <style>
      body {
        padding: 24px;
      }

      math-field {
        width: 100%;
        min-height: 128px;
        margin-bottom: 24px;
      }

      math-field::part(content) {
        background-color: coral;
      }
    </style>
  </head>
  <body>
    <math-field>abc</math-field>
  </body>
</html>

Debug Chrome
The following code was used to determine whether there is Chrome-specific issue with elements in a Shadow DOM receiving focus. I've created a code example where a nested contenteditable is programmatically focused whenever any element in the web component receives focus.
This seems to be working as expected on Chrome v133+. But it may not be a good replication of what is actually happening in mathlive...

Show code
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Debug focusing in Shadow DOM</title>
  </head>
  <body>
    <div>
      <editable-div></editable-div>

      <p>Confirm the following:</p>
      <ul>
        <li>
          Clicking on the contenteditable (grey box) focuses it, and you can
          type
        </li>
        <li>
          Clicking on the button focuses the contenteditable, and you can type
        </li>
        <li>Clicking below the contenteditable focuses it, and you can type</li>
      </ul>
    </div>

    <script>
      class EditableDivComponent extends HTMLElement {
        constructor() {
          super();
          // Create a shadow root
          this.attachShadow({ mode: "open" });

          const container = document.createElement("div");
          container.setAttribute(
            "style",
            "border: 1px solid #ccc; padding: 10px;"
          );

          // Create the contenteditable div
          const editableDiv = document.createElement("div");
          editableDiv.setAttribute("contenteditable", "true");
          editableDiv.setAttribute(
            "style",
            "background-color: #ddd; margin-bottom: 6px;"
          );
          editableDiv.setAttribute("id", "input");

          container.appendChild(editableDiv);

          // Create another focusable element i.e. button
          const button = document.createElement("button");
          button.setAttribute("type", "button");
          button.innerText = "Button";
          container.appendChild(button);

          // Append the container to the shadow DOM
          this.shadowRoot.appendChild(container);
        }

        connectedCallback() {
          const shadowRoot = this.shadowRoot;
          const host = shadowRoot.host;
          host.addEventListener("focus", this, true);
          host.addEventListener("blur", this, true);
          host.addEventListener("pointerdown", this, true);
        }

        handleEvent(event) {
          const input = this.shadowRoot.getElementById("input");

          if (event.type === "focus") {
            console.log("Handle focus");
            input?.focus();
          } else if (event.type === "blur") {
            console.log("Handle blur");
          } else if (event.type === "pointerdown") {
            console.log("Handle pointerdown");
            input?.focus();
            event.preventDefault();
            event.stopPropagation();
          }
        }
      }

      // Define the custom element
      customElements.define("editable-div", EditableDivComponent);
    </script>
  </body>
</html>

Duplicate issue #2646: Physical keyboard input not working, but virtual keyboard works fine
Created: 2025-03-25T12:36:12Z
Hi team 👋,
We're experiencing an issue with MathLive in our web app. The virtual keyboard works perfectly, but when we try to type using the physical keyboard, nothing happens — no input is registered.
✅ Expected Behavior:
Typing with the physical keyboard should input math expressions just like the virtual keyboard does.
❌ Actual Behavior:
Virtual keyboard input works as expected.
Physical keyboard input does not register at all.
🙏 Help Wanted:
Would appreciate any help or guidance on this — thank you!

Closing comment (2025-03-25T15:16:09Z): This is likely a duplicate of #2635 and/or #2588.