search

arnog / mathlive

A web component for easy math input
https://cortexjs.io/mathlive
MIT License
1.26k stars 260 forks source link

Change Color is Not Working As Expected When Combined With Virtual Keyboard #2380

Closed andrew-murdza closed 1 month ago

andrew-murdza commented 1 month ago

Include code fragments or CodePen.io links to illustrate the issue.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>untitled</title>
  <script defer src="//unpkg.com/mathlive"></script>
  <script type="module">
    function positionDraggableKeyboard() {
      const mf = document.activeElement;
      const showKeyboard =
        mf?.tagName === "MATH-FIELD" && mf.isSelectionEditable === true;
      if (showKeyboard) {
        mf.executeCommand("show-virtual-keyboard");
      }
    }
    customElements.whenDefined("math-field").then(() => {
      document.addEventListener("focusin", (ev) =>
        positionDraggableKeyboard()
      );
      document.addEventListener("focusout", (ev) => {
        if (ev.target.tagName === "MATH-FIELD") {
          mathVirtualKeyboard.visible = false;
        }
      });
    });
  </script>
</head>
<body>
<math-field>x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}</math-field>
</body>
</html>

The error I get is the following: mathlive:3050 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler? at es.hide (https://unpkg.com/mathlive:3050:13029) at es.hide (https://unpkg.com/mathlive:3050:17589) at https://unpkg.com/mathlive:3050:6407

Steps to Reproduce

Provide steps that are specific and repeatable

  1. Highlight 4ac
  2. Click three bars, Color, and Red Rectangle
  3. Repeats Step 1 and Step 2

Actual Behavior

When Steps 1 and 2 are done, the color of the text is not changed. When Step 3 is done (in other words Step 1 and Step 2 are repeated) then the color changes

Expected Behavior

I expected the color to change the first time like it does when you remove the line saying "mathVirtualKeyboard.visible = false;"

Environment

It is not a regression

The MathLive version is 0.98.6

Windows 11

Chrome is the Browser. I also tried Microsoft Edge