mathlive: 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

I start using mathfield and it’s working
As long as I don’t press “-” everything works as intended
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

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 28 (12 by maintainers)

Most upvoted comments

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

1lyad on Oct 11, 2021

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.

tkainrad on Sep 30, 2021

Yeah, the Finnish keyboard not working completing is not surprising. There is no Finnish keyboard layout supported. I think the closest one is the German keyboard (you can check which keyboard layout is in action with mfe.keyboardLayoutName I think). Please feel free to submit a separate issue/PR about this.

I’ll have a look at the updated code sandbox. This may be in a bit, I’m currently on the road with only a phone and poor connectivity.

And I hope you’ll think of me when your startup becomes wildly successful 😀

arnog on Sep 26, 2021