TypeError: can't access property "options", this.mathfield is undefined thrown

[screambeard]

Summary

• When adding and removing math-field elements while they are being focussed, mathlive can hit the error as stated in the title.
• See below a small HTML/JS code which can show this.
• I think the root cause is that the onBlur is triggered on the old element (already removed) when we refocus on the newly created element. See details of the code execution path down below.

Root Cause Analysis

In the onFocus method, you have the following code

const previouslyFocusedMathfield = __Mathfield._globallyFocusedMathfield;
if (previouslyFocusedMathfield && previouslyFocusedMathfield !== this && !previouslyFocusedMathfield.disabled && previouslyFocusedMathfield.hasFocus()) {
      previouslyFocusedMathfield.onBlur({
        dispatchEvents: true
      });
}

In the onBlur (executed on the previously focussed element), the following code is present:

if (__Mathfield._globallyFocusedMathfield === this) __Mathfield._globallyFocusedMathfield = void 0;
if (this.ariaLiveText) this.ariaLiveText.textContent = "";
hideSuggestionPopover(this);
if (this.model.getValue() !== this.valueOnFocus) {
...
}

The first line sets the _globallyFocusedMathfield to undefined
Consequently, the getValue function will endup in the atomToString function, which has the following code:

return Atom.serialize([atom], {
        expandMacro: format === "latex-expanded",
        skipStyles: format === "latex-unstyled",
        skipPlaceholders: format === "latex-without-placeholders",
        defaultMode: this.mathfield.options.defaultMode
});

At this stage the this.mathfield can be undefined causing the error.

My guess is that something is happening with memory references to the mathfield object and via the onBlur you can end up in the atomToString function which assumes the this.mathfield is defined.

Replication

I created a small setup to replicate the error. Take the following steps:

• use the code below to create a index.html
• open de index.html in Firefox (I can consistently replicate this issue in that browser)
• the math-field should be automatically focused
• press enter (the mathfield will be removed from the dom)
• click on the "add" button
• see error in your console window.

I get the following error and strack trace

Uncaught TypeError: can't access property "options", this.mathfield is undefined
    atomToString https://unpkg.com/mathlive:3223
    getValue https://unpkg.com/mathlive:3223
    onBlur https://unpkg.com/mathlive:3225
    onFocus https://unpkg.com/mathlive:3225
    focus https://unpkg.com/mathlive:3225
    focus https://unpkg.com/mathlive:3234
    createMathField file:///Users/thijsgillebaart/Desktop/tmp_mathlive_debug/index.html:39
    setTimeout handler*createMathField file:///Users/thijsgillebaart/Desktop/tmp_mathlive_debug/index.html:38
    <anonymous> file:///Users/thijsgillebaart/Desktop/tmp_mathlive_debug/index.html:45
    EventListener.handleEvent* file:///Users/thijsgillebaart/Desktop/tmp_mathlive_debug/index.html:43