Parentheses of StaticMath Don't Display For Previously Hidden HTML Element

[Ephraim-Bryski]

If the HTML element of a static math field first has its display set to none, and then its field's latex is set, the parentheses (or brackets) are not displayed when the element is displayed. In the sample code, when the user presses the button, the parentheses don't display.

Note that if the display is set to none after the latex is set, the problem is resolved. For my use case, though, I have several elements with static mathquill which are hidden by default but can be displayed on user clicks. Temporarily making the elements display before setting the latex and hiding it immediately after seems hacky, and might get pretty complicated.

<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://www.glowscript.org/lib/jquery/2.1/jquery.min.js"></script>
<link rel="stylesheet" href="mathquill/mathquill.css"/>
<script src="mathquill/mathquill.js"></script>

<button onclick="show()">SHOW</button>
<div id="math-field"></div>

<script>

var MQ = MathQuill.getInterface(2);
var htmlElement = document.getElementById('math-field');
var mathField = MQ.StaticMath(htmlElement);

htmlElement.style.display = "none"
mathField.latex('\\left(3 \\cdot x\\right)');

function show(){
    htmlElement.style.display = ""
}

</script>

[kschaefe]

MathQuill calculates the size for the parens. When you use display: none, the element has no size and the parens' heights cannot be calculated.

We have typically thrown the element offscreen, so that it will render properly. You would also need to dynamically apply and aria-styling for the field because you're not using display: none.

.mq-hide {
    width:auto !important;
    height:auto !important;
    line-height:normal !important;
    overflow:hidden !important;
    position:fixed !important;
    left:-9999px !important;
    /* opacity:0 !important; <-might be needed?, though we never have */
}

[Ephraim-Bryski]

Thank you!