Use of typing animation causes later glitch in keyboard input on mobile

[psx18]

Issue summary

I'm able to reproduce the bug on one of the official typing animation examples: https://codepen.io/jcubic/pen/QWvobpa Once the animation has ended and the terminal is waiting for input: As I type a command, my input will sporadically be 'submitted' to the terminal as if I had hit 'enter', even though I haven't

(Sidenote: on mobile, keyboard input is also not disabled during animation by setting keydown to false)

Expected behavior

typed command should be submitted to terminal only when "enter" has been pressed

Actual behavior

as you type your command, submission will sometimes be triggered without 'enter' having been pressed

Steps to reproduce

1. In Chrome on Android, go to https://codepen.io/jcubic/pen/QWvobpa
2. Wait for the animation to end and the terminal to start accepting input
3. Start typing at random. Use of 'space' of 'backspace' may increase chances of random submission, I'm not sure

Browser and OS

Chrome on Android phone

[jcubic]

Thanks for the bug report, will check this out.

[psx18]

Update: The bug disappeared once I removed keyboard.js and mousewheel-min.js from my imports. The bug still exists, but it has nothing to do with the use of animation like I previously thought. It has to do with one of those two files

[jcubic]

keyboard.js is a polyfill, without it, the library may not work. So if in your case something is working, it means that part of the library is not working properly.

[jcubic]

I have no idea what you found because I'm not able to reproduce. Can you maybe record a video where you have the issue? I've added a viewport meta tag to the CodePen (since all Codepen demos don't have them) and I've viewed them in debug mode (so without CodePen interface) and it works fine. Actually, I'm not able to use Terminal CodePen demos (with CodePen interface) at all because when I'm focusing in the terminal everything is huge.

Do you have any other cases where something is wrong? Maybe this is something with CodePen.

[jacknely]

I believe I might have the same issue with my implementation but I do not believe it's related to the animation. If you navigate to my site learn2k8s.com on chrome mobile then type <ANY STRING> -- then the terminal sees this as enter. eg test --

[jcubic]

@jacknely I'm not able to reproduce. Can you record a video? Also what kind of system you're using?

[jcubic]

Also what kind of keyboard, if the system allows to change it (like on Android).

[jacknely]

See the attached video. Typing the same thing on a computer browser does not submit. I am using GBoard on Pixel 6. The same problem is present on chrome and safari on iPad 5.

https://user-images.githubusercontent.com/5816901/179373429-61304103-26ae-494b-8d7c-4d61214d2c13.mp4

[jcubic]

@jacknely thanks, I'm able to reproduce on browser stack, on my phone I use different keyboard when to type - I hold the key. Something needs to be off on the symbol keyboard switch. And it's not only - I've tested $ _ - they all trigger enter.

[jcubic]

@porksausagex180 did you use, the symbol keyboard?

[Pooky12332]

I'm having this exact same bug but it also includes the letter i for some reason? when typing '-' or 'i' it treats it as pressing enter, I've tested it on a few phones, all being android The 'i' only happens on certain browsers but the '-' happens on all of them

[jcubic]

There is a hack in the code to detect keydown and keypress on Android, it uses input event to detect the key that was pressed. This is the only way to detect the keys on Android. Maybe the problem is with that code.

[Pooky12332]

I ran a little check and there are actually a lot more characters that cause this enter issue, here are all of the ones I tried, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, @, #, £, _, -, ', ~, `, $, %, \ and others When inputing these by themselves or at the start of a command, there is no issue but when there is a different character in front of it, it presses enter Weirdly, - causes the bug but not + Another side effect I've noticed is if one of these fake enters occurs, when the screen auto scrolls down and you start to type, it flickers to the top and back down again for each character you type This was all done on android and on Chrome for android

[jcubic]

@Pooky12332 can you record a video with this auto-scroll?

[Pooky12332]

https://user-images.githubusercontent.com/73506433/199750430-a8a43dc3-0dd2-41bb-98bc-0238e61d45aa.mp4

Here's the flickering and auto-scroll I was talking about, it only occurs after entering one of the fake enter characters and then typing another command This was done on my site using the library, but found it happens on other sites as well At 0.07 seconds you can see the auto-scroll effect and after that, you will see the flickering

[Pooky12332]

Turns out you can cause the flicker and auto scroll to occur just by entering commands that go off the screen, I have no idea what's causes it but this seems like the most likely cause as I don't even need to get an error for it to happen