Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
andrew-murdza opened this issue May 19, 2024 · 0 comments
Assignees

Comments

@andrew-murdza
Copy link

andrew-murdza commented May 19, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants