Keyboard layout changes to wrong layout during usage

Description

https://user-images.githubusercontent.com/46352445/134766193-97266791-32df-4206-a94d-889fd194fdf2.mp4

Finnish keyboard layout: http://kbdlayout.info/KBDFI/

So initially the layout is all good. As you can see, I can type multiple “-” (next to right-shift) on my Finnish keyboard. But when I “submit” the answer the next time I’m using mathfield the layout has changed to a wrong layout, where pressing the same key leads it to be interpreted as “/” which leads to a fraction.

About that “submit”. Copy-pasting all my code to codesandbox would take a bit too much time I try to explain the part of code that I think is relevant to this issue. I could share @arnog my private repo for a moment to debug this if you think that’s needed.

  const handleOnEnterKeyPressedOrFocusLostAndValueChanged = () => {
    if (mfe.value !== "") {
      // This is a long function (that comes from parent component) that get's called when I "submit" the answer
     // Eg. Checking the answer, clearing states, showing the success message etc.
      onEnterKeyPressedOrFocusLostAndValueChanged(mfe.getValue(format))
      mfe.setValue("")
    }
  }

  useLayoutEffect(() => {
    console.log("Mounting mathfield")

    ref.current?.appendChild(mfe)
    mfe.addEventListener(
      "change",
      handleOnEnterKeyPressedOrFocusLostAndValueChanged
    )
    mfe.focus()
    return () => {
      console.log("Unmounting mathfield")

      mfe.removeEventListener(
        "change",
        handleOnEnterKeyPressedOrFocusLostAndValueChanged
      )
      ref.current?.removeChild(mfe)
    }
  }, [])

Steps to Reproduce

1. I start using mathfield and it’s working
2. As long as I don’t press “-” everything works as intended
3. When I at some point of time press “-”, the next math challenge I try to type “-” is interpreted as a fraction

Actual Behavior

I can’t type “-”

Expected Behavior

I can type “-”

Environment

MathLive version

0.69.7

[1lyad]

Had same issue with swedish layout, fixed it with “locale=sv-SE”

[tkainrad]

Thansk for the mentin @Temez1. This was a very interesting read for me, as I have come to similar conclusions as @arnog over the past two years. Would have been very helpful to read these comments before that time.

Unfortunately, I don’t have much to add to the discussion. @stefnotch already mentions Keyboard.getLayoutMap(), which can be used to get a mapping from a key’s universal code to the layout-dependent character that’s printed on the user’s keyboard. KeyCombiner uses this to display a layout-specific virtual keyboard for each user. However, the API is only available on Chromium-based browsers and has other problems, too.

In my experience, letting users define their own bindings is the only approach that kinda solves this problem for every possible layout and special case. They can just assign what works for them on their machine. Other approaches that I mentioned in my article (using keypress, the event’s key property,…) could work well for simple apps, but make it very complicated when trying to provide support for many special characters, like I think MathLive is doing.