Changing alphabeticLayout property does not take effect immediately

JulienLL commented 3 months ago

Description

When setting the mathVirtualKeyboard.alphabeticLayout property, the keyboard layout is not updated until the second time the keyboard is displayed.

Steps to Reproduce

Use the code below
Focus on the mathfield. Notice the keyboard layout is still QWERTY
Remove focus on the mahtfield, then focus it again. The keyboard layout is now AZERTY

Expected Behavior

The keyboard layout would have been AZERTY when first focusing the mathfield.

`<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/mathlive/dist/mathlive.min.js"></script>
</head>
<html>
<body>

<math-field id="mf1"></math-field>

<script>
mf1.addEventListener('focus', () => {
  mathVirtualKeyboard.layouts = "alphabetic";
  mathVirtualKeyboard.alphabeticLayout = "azerty";
  mathVirtualKeyboard.visible = true;
});
</script>
</body>
</html>`

arnog commented 3 months ago

Updated title and issue description to follow template.

The issue has been resolved. However, you can work around it by setting the alphabeticLayout before changing layouts.

You should also configure the keyboard outside the focus event handler, since this only need to happen once, not every time the mathfield is focused. With these change, your code would look like this:

mathVirtualKeyboard.alphabeticLayout = "azerty";
mathVirtualKeyboard.layouts = "alphabetic";
mf1.addEventListener('focus', () => {
  mathVirtualKeyboard.visible = true;
});

JulienLL commented 3 months ago

Hello, Indeed by reversing the commands "math Virtual Keyboard.alphabetic Layout" and "Mathematical virtual keyboard.layouts" works well. On the other hand, I have to load the keyboards with the focus event if I want to have different keyboards on the same page. Thanks !

arnog / mathlive