[Bug Report] el-input not firing input event on android

[SebT]

Element UI version

2.4.11 (updating to 2.6 doesn't fix)

OS/Browsers version

Android 9 - Chrome

Vue version

2.5.16 (updating to 2.6 doesn't fix)

Reproduction Link

https://jsfiddle.net/p20gfmos/

Steps to reproduce

1. Use an el-input on a Android device (android 8+) with gBoard keyboard
2. Type something in the input

What is Expected?

The value of the input is immediately displayed under it in a div.

What is actually happening?

The input instance value is not updated on keypress. It's only updated on blur or if the space key is pressed.

When debugging a bit, I realized the input event wasn't fired by element because this.isOnComposition is true in the keypress listener.

I tried on several android phones and simulators and I can reproduce with every Android 8+ devices using gBoard. If I use another keyboard like SwiftKey, it works fine.

[wacky6]

Does using native input and v-model gives the desired result. If not, we won't fix it.

[SebT]

Yes it works fine with a native input, that's why I suppose the bug is related to element-ui.

I checked the source code. The method handleInput of the el-input is correctly called. But no input event is emitted from el-input because this.isOnComposition is true. And I haven't check the code related to composition but I guess the bug is in there.

[SebT]

Ok, after some debugging here is what happens on an android 9 phone with gBoard keyboard :

1. When we start typing, compositionstart is fired
2. So this.isOnComposition is set to true :

   element/packages/input/src/input.vue

   Line 277 in c1b869d

   this.isOnComposition = !isKorean(lastCharacter);

   because my keyboard is not korean
3. So handleInput doesn't emit input event because of this line :

   element/packages/input/src/input.vue

   Line 286 in c1b869d

   if (this.isOnComposition) return;

4. compositionend is fired only on blur or when the space key is pressed, then the input event is correctly fired

So clearly this is strange, as I believe compositionstart should NOT be fired.
On a "working" keyboard like SwiftKey, composition events are only fired when the space key is pressed (start then immediatly stop).

I think I'll fork the project and remove composition event listeners as a quick workaround.
I have no experience with composition so I don't really know what it's for, but I need a quickfix because all inputs in my app are broken on android (with gBoard) now.

[wacky6]

The design is not to emit input event during composition. So I guess it’s likely gBoard’s design issue.

We won’t change mainline code because we need to support CJK IMEs. Though you are welcomed to find a workaround that detects gBoard and hack the composition events a little bit.

I would also recommend you ask gBoard team why they choose to handle English words as character compositions.

[xiaoshude]

Ok, after some debugging here is what happens on an android 9 phone with gBoard keyboard :

1. When we start typing, compositionstart is fired

2. So this.isOnComposition is set to true :

     [element/packages/input/src/input.vue](https://github.com/ElemeFE/element/blob/c1b869d7ce6d8f70dd3f4d1c006e70986e63a7fd/packages/input/src/input.vue#L277)
   
   
        Line 277
     in
     [c1b869d](/ElemeFE/element/commit/c1b869d7ce6d8f70dd3f4d1c006e70986e63a7fd)
   
   
   
   
   
       
         
                    this.isOnComposition = !isKorean(lastCharacter); 
   

   because my keyboard is not korean

3. So handleInput doesn't emit input event because of this line :

     [element/packages/input/src/input.vue](https://github.com/ElemeFE/element/blob/c1b869d7ce6d8f70dd3f4d1c006e70986e63a7fd/packages/input/src/input.vue#L286)
   
   
        Line 286
     in
     [c1b869d](/ElemeFE/element/commit/c1b869d7ce6d8f70dd3f4d1c006e70986e63a7fd)
   
   
   
   
   
       
         
                  if (this.isOnComposition) return;
   

4. compositionend is fired only on blur or when the space key is pressed, then the input event is correctly fired

So clearly this is strange, as I believe compositionstart should NOT be fired.
On a "working" keyboard like SwiftKey, composition events are only fired when the space key is pressed (start then immediatly stop).

I think I'll fork the project and remove composition event listeners as a quick workaround.
I have no experience with composition so I don't really know what it's for, but I need a quickfix because all inputs in my app are broken on android (with gBoard) now.

element/packages/input/src/input.vue

Line 286 in c1b869d

if (this.isOnComposition) return;

change this line to:

        if (event.isComposing) return;

[tleperou]

Can we assume that composing may last up to 0.6s:

• human feels easily lag over 0.2s
• based on my usage, changes while composing occur within the first 0.5s (writing Vietnamese)

The idea is to emit the event if there are no changes while composing after a certain time.

Also, on my Gboard of Android, the input event is never triggered, even when using a composition language input (Vietnamese)

[lkho]

The design is not to emit input event during composition. So I guess it’s likely gBoard’s design issue.

We won’t change mainline code because we need to support CJK IMEs. Though you are welcomed to find a workaround that detects gBoard and hack the composition events a little bit.

I would also recommend you ask gBoard team why they choose to handle English words as character compositions.

Would it be better if el-input will forward the composing events to the parent, so the caller can choose what to do with his business logic?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[saslavik]

element-plus/element-plus#10002 (comment)