Extra keyboard animations when changing focus between math fields

Description

Virtual keyboard animates out and back in when changing focus from one math-field to another. We’ve run into this in a few different ways in Brilliant lessons and it’s causing a noticeable amount of disorientation if we have 2 or 3 inputs for a given problem.

Steps to Reproduce

1. Create a demo page with two math-fields with onFocus as their virtual-keyboard-mode
2. Focus one of the fields
3. Focus the other, either by clicking on it or tabbing

Actual Behavior

As you change from one field to the other the keyboard slides out and then back in.

Expected Behavior

The keyboard (assuming the same layout), should stay visually persistent.

Environment

MathLive version master (e259559b)

Operating System macOS 12.3.1

Browser Reproduced on both Safari and Brave

Suggested Fix

Instead of directly fixing the bug, I think what’s really missing here is a virtual-keyboard-mode that allows the caller ultimate control of whether the keyboard is hidden or shown. We have showVirtualKeyboard and hideVirtualKeyboard, however regardless of mode the keyboard will be hidden due to the onBlur in mathfield-private.ts

Instead of always disabling it, allowing it to be left up to the caller would allow them to handle the hiding and showing as relevant to their application.

I’m happy to open a PR to that effect if that sounds reasonable.

[arnog]

OK, I looked into it, but it’s not a trivial change. Any mathfield elements that have been connected to the DOM before makeSharedVirtualKeyboard() has been called have been setup to not use a shared virtual keyboard instance (i.e. they have created their own virtual keyboard instance). If they would expect to be changed after makeSharedVirtualKeyboard() is changed they would have to be unmounted from the DOM, then remounted.

I’ll clarify in the documentation that makeSharedVirtualKeyboard() should be called as early as possible, and before mathfield elements are connected to the DOM.

[hanshs]

While creating an example in a vanilla/no-framework type of setup, I managed to reproduce the faulty behaviour I described previously, heres the example repo - https://github.com/hanshs/mathlive-vite-vanilla-ts In /src/main.ts there are instructions on how to toggle between the faulty and correct behaviour.

Looks like calling setOptions for a math-field instance, causes the behaviour to break.