Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Android][iOS][Cordova]Virtual keyboard doesn't work as an input #701

Closed
stevesum opened this Issue Dec 4, 2017 · 21 comments

Comments

Projects
None yet
6 participants
@stevesum
Copy link

stevesum commented Dec 4, 2017

馃悶 Is this a bug report or feature request? (choose one)

  • Bug report

馃捇 Version of CKEditor

CKEditor 5 classic editor build 1.0.0-alpha.2

馃搵 Steps to reproduce

  1. Create an editor
  2. tap into the editor area
  3. when the virtual keyboard appears, type on the virtual keyboard

Expected result

typed text should appear in the editor area

Actual result

the editor area stays empty and the value of the editor also null

馃搩 Other details that might be useful

The application runs in a native WebView (built by cordova)
after I fixed the addListener problem by #683

@Reinmar

This comment has been minimized.

Copy link
Member

Reinmar commented Dec 4, 2017

The package responsible for handling typing is https://github.com/ckeditor/ckeditor5-typing.

It handles typing by using MutationObserver and applying various heuristics to recognise what was typed, where and what should be the selection. This is by far the most complex feature ;/

The reason why it works in such a non-straightforward way is that browsers don't expose any other API to handle typing. There's only the beforeInput event, but it's not fully speced yet and available in Chrome and Safari only.

So, how to debug this?

The first thing to do will be to check whether both of these listeners work: https://github.com/ckeditor/ckeditor5-typing/blob/645b92bda7cbc1471f8423149aed4cd4252c1357/src/input.js#L45-L51. When someone presses a letter, both should be executed. And there should be reasonable mutations.

The known issue with Android browsers is that the keydown is fired without keyCode. That's due to the fact that keyboards in Android are implemented as IME widgets. They simply do not let the browser know what key has been pressed (because there might not be any) but instead tell the browser to insert/delete some character. This means that our mutation-based typing handler can handle typing but at the same time we have problems with handling Backspace and Enter. @szymonkups is working on these cases right now. We'll either use beforeInput or more heuristics for mutations.

@Reinmar

This comment has been minimized.

Copy link
Member

Reinmar commented Dec 4, 2017

PS. My biggest worry here is that there's no mutation observer available in Cordova yet. I don't know how old Chromium they use there, but it'd mean that veery old.

I know that someone was using mutation observer's polyfill with Android, so that could be one thing to check. But in general, things get seriously hard when someone uses so outdated platforms.

@stevesum

This comment has been minimized.

Copy link
Author

stevesum commented Dec 4, 2017

I'll test it.
The problem is happened to me on iOS also, so I don't think the 'outdated platforms' could be blamed for it. The minimal requirements of the cordova-ios framework what we use is the iOS9.

@Reinmar

This comment has been minimized.

Copy link
Member

Reinmar commented Dec 11, 2017

Do you remember how to reproduce that issue on iOS?

Generally speaking, we didn't spend much time on testing and debugging mobile devices yet because we first want to polish the editor for desktop environments as this is still the most common use case for rich text editing. So all kind of feedback on what's the status of things on iOS or Android will be very helpful for us.

@Mgsy Mgsy referenced this issue Jun 25, 2018

Open

[Umbrella] Android issues #614

7 of 15 tasks complete

@f1ames f1ames changed the title Virtual keyboard doesn't work as an input [Android][iOS][Cordova]Virtual keyboard doesn't work as an input Jul 4, 2018

@stevesum

This comment has been minimized.

Copy link
Author

stevesum commented Jul 24, 2018

Hi. I tested again with both Android and iOS, and as I see on the android the problem is already solved.

But on iOS still can't type into the CKEditor with the virtual keyboard.
I tried to debug the problem, and as I see the 'keydown' event is cached and delegated into the _handleKeydown function in the Input class, but I can't follow the code from there.

@f1ames

This comment has been minimized.

Copy link
Member

f1ames commented Jul 30, 2018

@stevesum is there any particular iOS/Safari version you test with?

@stevesum

This comment has been minimized.

Copy link
Author

stevesum commented Aug 1, 2018

@f1ames iOS 11.44.1/WKWebview

@Reinmar

This comment has been minimized.

Copy link
Member

Reinmar commented Aug 14, 2018

@f1ames, @Mgsy are we able to test CKE5 in that webview quickly? I don't mean that particular version, but the webview itself.

@f1ames

This comment has been minimized.

Copy link
Member

f1ames commented Aug 14, 2018

@Reinmar I have used a special app for this (AFAIR this one - should be present on our testing devices) so yes on Android. TBH, haven't check if there is something similar for iOS. Will take a look in a spare moment.

@Mgsy

This comment has been minimized.

Copy link
Member

Mgsy commented Aug 29, 2018

I've investigated this issue a bit and it seems that this bug is related to Cordova.

At first, I checked whether CKEditor 5 works in a native iOS WebView (WKWebview and UIWebView) and I was able to use the editor without any problems. So, I decided to create a project in Cordova and see how the editor will behave.

My project was using cordova ios 4.5.5 (the latest version) and cordova wkwebview engine plugin, which makes Cordova use WKWebView component. After building and running the app, CKEditor loaded properly, but I wasn't able to type inside of it via the virtual keyboard.

The device I use is iPad with iOS 11.4.

@wwalc

This comment has been minimized.

Copy link
Member

wwalc commented Aug 29, 2018

In case anyone was interested, PhoneGap / Apache Cordova popularity:

screen shot 2018-08-29 at 15 49 39

(source: https://www.appbrain.com/stats/libraries/details/phonegap/phonegap-apache-cordova)

@Reinmar Reinmar added this to the unknown milestone Sep 11, 2018

@allanpoppe

This comment has been minimized.

Copy link

allanpoppe commented Jan 26, 2019

So... no news on this?

I'm using ckeditor5 inside an Ionic app. On Android it works very well. On iOS I have this issue: can't type anything.

"cordova-ios": "4.5.5",
"cordova-plugin-ionic-webview": "2.3.2",
"@ckeditor/ckeditor5-angular": "1.0.1",
"@ckeditor/ckeditor5-build-classic": "11.2.0",
@Reinmar

This comment has been minimized.

Copy link
Member

Reinmar commented Jan 28, 2019

No, we haven't worked on this. It seems to be caused by some bug in Cordova. If you could help to debug it (see #701 (comment) for some hints) we'd be grateful.

@allanpoppe

This comment has been minimized.

Copy link

allanpoppe commented Jan 28, 2019

I think the CSS below will solve the issue, but I don't have time to test it now. I've switched to another plugin, on which I had the same issue.

Ionic disables user select by default.
Maybe the CSS tag needs to be changed, I don't know. This is for the other plugin.

[contenteditable] {
	-webkit-user-select: text;
	user-select: text;
}
@Reinmar

This comment has been minimized.

Copy link
Member

Reinmar commented Jan 29, 2019

Thanks for the tip! It makes a lot of sense. @Mgsy could you test it?

@Mgsy

This comment has been minimized.

Copy link
Member

Mgsy commented Feb 8, 2019

Thanks for the tip! It makes a lot of sense. @Mgsy could you test it?

At first, I've checked whether the problem is solved on the latest iOS (12.1.1) and after building the project in Cordova and running it on the iPad I was able to type inside the editor using the virtual keyboard.

@allanpoppe, could you tell us which version of iOS you use?

@allanpoppe

This comment has been minimized.

Copy link

allanpoppe commented Feb 8, 2019

@Reinmar

This comment has been minimized.

Copy link
Member

Reinmar commented Feb 11, 2019

Could you perhaps share some code/project that we could build locally to test it?

@Mgsy

This comment has been minimized.

Copy link
Member

Mgsy commented Feb 11, 2019

I've managed to reproduce the issue. Generally, there are two conclusions:

  • The virtual keyboard works fine when you build an app using Cordova and deploy with Xcode
  • The issue is reproducible when you use the Ionic framework. After focusing the editor, the selection doesn't appear in the editable and there's no way to type anything.

Ionic disables user select by default. Maybe the CSS tag needs to be changed, I don't know. This is for the other plugin.

I've tested your solution and you're right. After changing the user-select property on the CKEditor component, you would be able to type inside the editor.

So, adding this to the component will solve the issue:

{
    -webkit-user-select: text;
    user-select: text;
}
@Reinmar

This comment has been minimized.

Copy link
Member

Reinmar commented Feb 11, 2019

That's a great news :) I think we should add a section about this in https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/overview.html. Could you do that, @Mgsy?

@Reinmar Reinmar modified the milestones: unknown, iteration 22 Feb 11, 2019

@allanpoppe

This comment has been minimized.

Copy link

allanpoppe commented Feb 11, 2019

@Mgsy Mgsy closed this in #1519 Feb 11, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.