Is there a way to continue focusing a MathQuill input when a button is pressed?

I’m using the Desmos fork for MathQuill with buttons to input symbols:

var MQ = MathQuill.getInterface(2);
var answerSpan = document.getElementById("input");
var answerMathField = MQ.MathField(answerSpan);
document.getElementById("keypad-left-parenthesis").onclick = function () {
  answerMathField.focus();
  answerMathField.cmd("(");
};
document.getElementById("keypad-right-parenthesis").onclick = function () {
  answerMathField.focus();
  answerMathField.cmd(")");
};

body {
  font-size: 32px;
  margin: 1em;
}
.mq-editable-field {
  margin: 1em 0;
}
button {
  width: 2em;
  height: 2em;
}

<link href="https://cdn.jsdelivr.net/npm/mathquill@0.10.1-a/build/mathquill.css" rel="stylesheet">
<div id="input"></div>
<div><button id="keypad-left-parenthesis">(</button><button id="keypad-right-parenthesis">)</button></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mathquill@0.10.1-a/build/mathquill.min.js"></script>

(There isn’t a CDN I can use for the Desmos fork, but this behavior exists for both versions of MathQuill)

When I press the left parenthesis symbol on desktop, the math field temporarily loses focus, then the left parenthesis is inserted. A right parenthesis approaches as a “ghost”. But when I press the right parenthesis symbol, the math field loses focus again, the “ghost” becomes solid, and thus the right parenthesis is inserted inside, producing two groups of parentheses—one inside another—when only one was intended.

Is there a way to apply the focus style even when the button is being clicked, like the Desmos website does?

Solution

The onclick event you're using can't prevent the focus loss.

One way to fix the issue is to use the onmousedown instead of the onclick

This should not change the behaviour but allows us to use event.preventDefault() to keep the focus on the input

So the button would look like:

document.getElementById("keypad-left-parenthesis").onmousedown = function () {
    event.preventDefault();
    answerMathField.cmd("(");
};

Updated snippet:

var MQ = MathQuill.getInterface(2);
var answerSpan = document.getElementById("input");
var answerMathField = MQ.MathField(answerSpan);

document.getElementById("keypad-left-parenthesis").onmousedown = function () {
  event.preventDefault();
  answerMathField.cmd("(");
};
document.getElementById("keypad-right-parenthesis").onmousedown = function () {
  event.preventDefault();
  answerMathField.cmd(")");
};

body {
  font-size: 32px;
  margin: 1em;
}
.mq-editable-field {
  margin: 1em 0;
}
button {
  width: 2em;
  height: 2em;
}

<link href="https://cdn.jsdelivr.net/npm/mathquill@0.10.1-a/build/mathquill.css" rel="stylesheet">
<div id="input"></div>
<div><button id="keypad-left-parenthesis">(</button><button id="keypad-right-parenthesis">)</button></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mathquill@0.10.1-a/build/mathquill.min.js"></script>