Mathfield in Iframe and touch devices only allows one character to be written.

[Aguss17]

Description

I have a field of type:

<math-field ref={mf} onInput={handleChange}> {text} </math-field>

It works correctly, but if I put my application inside an iframe, and I am also on a touch device. I have seen that when I press any key on the virtual keyboard, the pressed key is typed, but it does not let you type any more. To rewrite another character you have to lose focus and gain it again.

Steps to Play

1. I put my app inside an iframe
2. I access my application with a touch device (for example with Chrome in mobile view)
3. I click on the mathfield input, and the keyboard appears
4. Press any key

Current Behavior

I have seen that when I press any key on the virtual keyboard, the pressed key is typed, but it does not let you type any more. To rewrite another character you have to lose focus and gain it again.

Expected Behavior

The virtual keyboard should allow you to type the characters you want.

Environment

I have tried all versions from 0.96.2 2023-11-16 to: 0.98.6 2024-01-27

MathLive version 0.96.2 2023-11-16 until: 0.98.6 2024-01-27

Operating System _macOS 14.2.1 (23C71)

Browser Chrome Version 123.0.6312.122 (Official Build) (arm64)

[gunnarmein-ts]

I am experiencing the same - and I have some fixes in my fork, although I don't think they would hold up to Arno's standards. I will make a summary of what I did and post here if that is ok.

[gunnarmein-ts]

test.zip @arnog Here is a minimal repro. Hope it helps.

[Aguss17]

@gunnarmein-ts Thank you for responding. Is there something I can do on my project to prevent this from happening while this case is being fixed in the library?

[gunnarmein-ts]

fixes2.pdf fixes1.pdf @Aguss17 I don't know of any fix outside the library. I am attaching printouts of the changes I made. I am not going to submit a pull request for these as Arno would probably fix these issues differently. @Arno I'd be happy to talk and implement a better fix.

Also notice that sometimes I check for instanceof MathfieldElement rather than tagName === "math-field", because I subclass the mathfield. You can ignore that if you make your own fork.

[Aguss17]

@gunnarmein-ts Thank you for your response, I will then wait to see if it gets fixed in future versions of the library.

[Aguss17]

@gunnarmein-ts I have done a fork and I have put the list of changes that you mentioned in the fixed1.pdf and fixed2.pdf files. And I've been testing within an iframe and the same problem keeps happening to me. Do I need to apply any other changes?

[gunnarmein-ts]

@Aguss17 I can't help you in the next few days, traveling. Perhaps it has to do with how we are using it:

• "sandboxed"
• .show() on focusin, .hide() on focusout() Let me know how you fare. I'll try to help next week.

[Aguss17]

@gunnarmein-ts it already works for me, finally the changes I had to make are: that is, do not do this:

if (evt.type === 'blur' && Scrim.scrim?.state === 'closed')
       this._mathfield?.blur();

when we are in an iframe on a touch device

and the listener that hid the keyboard I previously had in focusout and now I have put it in blur:

mf.current.addEventListener('blur', () => { getKeyboard().hide(); });

[Aguss17]

@arnog thanks!