Arrow Keys and other function keys don't work on iOS (Chrome, Safari)

[etamponi]

monaco-editor npm version: 0.7.0
Browser: Mobile Safari, Chrome for iOS
OS: iOS

Unfortunately, Monaco doesn't work on iOS due to their strange support to external keyboards: they don't fire events for Arrow Keys and similar function keys, making very hard to work on an iPad.

CodeMirror seems to have solved the problem by not using an hidden <textarea> tag to get the input. Both Monaco and Ace use an hidden textarea and this causes the editor to fail on iOS.

I can provide additional information if needed :)

[etamponi]

I've created this PR that shows how I implemented some of the needed functionality for Ace ajaxorg/ace#3172

[brandonmikeska]

Any plans to support this? Wouldn't mind helping since this would help me use StackBlitz on the iPad and hopefully replace my laptop :)

[ryskin]

So many time passed and no news, so simple task to do. Shame on you Microsoft, you won't support apple products

[alexdima]

@ryskin

Sorry, it's just me here. No need to shame me.

If you care deeply about this support, please submit a PR which implements it.

[ericcirone]

So not having arrow keys and such on the iPad is an issue with our product. I am looking into how to get around this.

@etamponi I've looked at your code, and I like your hack. It seems that it would work. Question for the development team of Monaco. The function getScreenReaderContent seems to be the one in control of setting the value on the textarea that is used in Monaco. For the iPad you make the text area empty. What is the reason for this?

[ericcirone]

Also just to put it out there, CodeMirror has this working, arrow keys, on screen keyboard selection and jump around. It seems they are able to pull this off because for mobile they make their elements contenteditable. When that is on, iOS treats it as like it would a textarea. Anything that can be done on that front with Monaco?

[tobmaster]

There seems to be a fix for this at codesandbox-client codesandbox/codesandbox-client#507

Maybe it's possible to use it as well? Having a ubiquitous editor would be awesome.

[samjacobclift]

@alexandrudima would there be an appetite for solution like the one @tobmaster suggested?

[aadsm]

Hey, I wrote the fix for CodeSandbox and the only reason it was possible is because CodeMirror has a specific mode for mobile that uses contenteditable (just like @ericcirone describes in their comment). It’s still a super hacky way of solving it though, it’s polling for the range, so it brings its own performance tradeoffs.
Creating a contenteditable mode in Monoco is not a simple task to take on, so unless Microsoft is really motivated in solving this problem I find it unlikely to happen.

To be honest, the real fix should be done at the webkit level. There is an open bug about this for a few years now and I’ve also contacted the webkit team about this, they are aware:
https://twitter.com/aadsm/status/1032694940684378112?s=21. I haven’t followed up in the meanwhile though.

[JacobEvelyn]

Thanks for all the info, @aadsm! I just added my support to that Twitter thread, for what it's worth. 😄

Once that Webkit bug is fixed, do you have a sense for what else would be needed for passable mobile support? On my phone it seems like my iPhone keyboard doesn't always appear when I touch into the editor, but I imagine (read: hope) that that's not too hard to fix. Are you or @alexandrudima aware of other issues?

[mehmetoguzderin]

Any updates on implementing a workaround for this problem? As a lot of new browser-based editors depend on Monaco, this would help users accessing these editors from an iOS device a lot.

[sean256]

@aadsm

To be honest, the real fix should be done at the webkit level. There is an open bug about this for a few years now and I’ve also contacted the webkit team about this, they are aware:

Have you checked the bug recently? They claim to have fixed it in 12.1.3b2 for "some elements". It looks like they passed the bug off to the UIKit team. I know someone who's on that team and I'm gonna bug him personally.

[mehmetoguzderin]

@aadsm

To be honest, the real fix should be done at the webkit level. There is an open bug about this for a few years now and I’ve also contacted the webkit team about this, they are aware:

Have you checked the bug recently? They claim to have fixed it in 12.1.3b2 for "some elements". It looks like they passed the bug off to the UIKit team. I know someone who's on that team and I'm gonna bug him personally.

My iPad MFTL2 software version is 12.1.4 and bug still persists (testing with Smart Keyboard).

[maxjerin]

@aadsm, @sean256, same here. Its not working on my MTFP2LL/A. I experienced the problem when using coder.com and opened Bug#250. For what's its worth, I've been trying to attack this problem from different ends. I tried to add the Vimacs extension to get vim mode working so I could h, j, k, l to move around. But I guess the product is still new and they are working out the kinks. I was able to add the extension, but not activate it. Others seem to have experienced the same issue Bug#340.

[sean256]

@maxjerin I found a way to intercept and modify KeyEvents and did get other keys to trigger arrow actions in the editor. When I have time I’ll put together a POC.

[sean256]

@aadsm @maxjerin https://jsfiddle.net/t9z72dgj/

You can use hjkl as arrow keys, even on the iPad.

[aadsm]

@JacobEvelyn once the bug is fixed then we should be good to go. Seems like a bug to me if it’s not popping up the keyboard, and I’d imagine to be easly fixable.

@sean256 yeah I looked at it at the time, from the comments it seems it still doesn’t work with textareas (they vowed to look into it). Yeah, key events do work on textareas in general so the hjkl solution has always worked. The problem lies with cursor and modifier keys like Cmd/Ctrl.

[sean256]

@aadsm I hadn't even noticed Cmd/Ctrl are also borked. Option/Alt does work however. For me, getting arrow keys at all (even through hjkl) would be a huge help. The mode could be toggled through a key combo using alt. Here's a fiddle which toggles the mode using alt+space: https://jsfiddle.net/14pjo572/

I'm gonna add this hack to my self hosted coder.com instance as it will get me most of what I need for now.

[aadsm]

@sean256 yes, that’s a good approach. It’s what I did for both CodeSandbox and Glitch (I wrote about it here https://dev.to/aadsm/extending-glitch-2fe1).

[frol]

It is still an issue in iOS 12.2 :(

[ameenQ]

can anyone confirm that arrow keys works in iPadOS 13 ?

[sund4nce]

Can confirm. Arrow Keys on my Smart Folio Keyboard work just fine now. Haven't done any in-depth testing though.

[rebornix]

Yup, arrow keys, w/ modifiers work as expected.

You can always play around with https://microsoft.github.io/monaco-editor/ and see what's being supported there.

[ameenQ]

i download iPadOS 13

and i use something called code-server https://github.com/cdr/code-server

is VS Code running on a remote server, accessible through the browser and it works perfectly in IPadOs 13 ,,,,

finally i can code using vscode in my ipad pro

[sean256]

I sent an old colleague on the UIKit team a link to this thread a few months ago and jokingly shamed him for it. I got a winking emoji back and now finally it's fixed. He wont fess up to having a part in it but he said we should all thank the WebKit team.

[rebornix]

@sean256 Any contact for sending out thank you swag would be appreciated!

Besides, thank you all for catching up, testing and keeping us notified about the progress from WebKit side.

[aadsm]

These are great news and makes me really happy!! I’ve thanked Charles Ying on twitter.

[sean256]

@rebornix I just shot you an email with a way to contact them.

[rebornix]

This issue is already fixed by webkit on iOS 13 and iPadOS.