Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

textarea ng-model is not updated in IE with Korean IME. #6656

Closed
tourscrap opened this issue Mar 12, 2014 · 21 comments
Closed

textarea ng-model is not updated in IE with Korean IME. #6656

tourscrap opened this issue Mar 12, 2014 · 21 comments

Comments

@tourscrap
Copy link

if I type the english, it is ok.
but if I try to type korean, I can't get text value from ng-model.
I think that compositionend event does not fired by IE

@Narretz
Copy link
Contributor

Narretz commented Mar 12, 2014

Can you please post a plnkr (http://plnkr.co) with a reproduction? And which version of IE is affected?

@btford
Copy link
Contributor

btford commented Mar 13, 2014

I think this is a duplicate of #6058.

What version of Angular are you using, @tourscrap? 2b73027 should have fixed this.

@btford
Copy link
Contributor

btford commented Mar 13, 2014

If this is still a problem in the latest 1.2.x let me know and I'll reopen this. Thanks!

@tourscrap
Copy link
Author

I am using angular 1.2.4. I tested IE 11,10,9.
@btford
http://plnkr.co/edit/xdk3jGwbM0NYMYNMPczj?p=preview

@btford
Copy link
Contributor

btford commented Mar 14, 2014

1.2.14 is the latest. Please update and try with that.

@tourscrap
Copy link
Author

@btford Oh, I'm sorry. My mistake. using 1.2.14

@iDevSK
Copy link

iDevSK commented Sep 30, 2014

How it's going? I got a same issue with IE 11. but Chrome works fine.

@iDevSK
Copy link

iDevSK commented Nov 24, 2014

I'm actually wondering how it's going?
Thank you

@sylvhama
Copy link

Hello,

I am web developer in Korea and I have noticed the same issue.
I found at least 3 differents cases:
-On Chrome, when you write something inside an input with the directive ng-model, the scope won't get updated with the last caracter. It's hard to explain but in Korean (like in japanese) there is this state where you "build" your caracter. While you are in this state the scope is not updating your variable.
-On IE10 (Korean version tested only), you need to click somewhere in the DOM or press spacebar / tabulation to update the variable. It means you can for example write a big word to filter a ng-repeat list, if you don't press something it won't work.
-On IE11 (Korean version, English version is fine!), it's the worst case! if you fill an input and click an another one, the first variable binding via ng-model will stay empty.

Important fact: I made a keyup function via jQuery, it works well!

I have recorded a video to show the issue on IE11 (Korean version): https://www.screenr.com/XGcN

Plunker: http://plnkr.co/edit/WaZvP4ivhIaPxYRmKjeF?p=preview

@iDevSK
Copy link

iDevSK commented Nov 27, 2014

There is big issue in IE11, Using the jQuery it works fine like @sylvhama but, it's hard to always using jQuery in such as ngRepeat.

@tourscrap
Copy link
Author

I think that the code for composition mode has many problem with IME.
I tried to remove code about composition in the textinputType function. It works fine.

/*if (!$sniffer.android) {
    var composing = false;

    element.on('compositionstart', function(data) {
      composing = true;
    });

    element.on('compositionend', function() {
      composing = false;
      listener();
    });
  }*/

var listener = function(ev) {
    //if (composing) return;
    var value = element.val();

@iDevSK
Copy link

iDevSK commented Dec 19, 2014

I tested IE11 and Chrome with IME
I figured out that It doesn't fired 'compositionend' event when i clicked the button in IE11.
but, In chrome it does fired 'compositionend' when I click.button.

I think there is some problem 'compositonend' with IME in IE11

So. It work's fine if disabled below code that @tourscrap said
//if (composing) return;

Let me show tested video.
https://www.screenr.com/2zLN

I added code to show console like this.

if (!$sniffer.android) {
var composing = false;

element.on('compositionstart', function (data) {
    console.log("compositionstart");
  composing = true;
});

element.on('compositionend', function () {
    console.log("compositionend");
  composing = false;
  listener();
});

}

var listener = function (ev) {
console.log("composing : " + composing + ", value : " + element.val());
if (timeout) {
$browser.defer.cancel(timeout);
timeout = null;
}
if (composing) return;
var value = element.val()

@azack
Copy link

azack commented Mar 6, 2015

noticed that I get ng-change events when typing with the MS Korean IME w/ IE11, but the model isn't updated. If I introduce a Latin character by toggling the character set in the IME the model gets updated with all the text (Korean and all), and if I use common characters such as space or numerical digits, or hit the delete key, it also updated the model. Tested with angular 1.3.14.

@azack
Copy link

azack commented Mar 7, 2015

Looking at it more, my results agree with @iDevSK . On IE 11 with Hangul input, Composition start and update events are fired while typing Korean, but Composition end is not fired until some other type of input occurs (enter, tab, space, etc, basically anything non-hangul). I thought this was an IE11 bug but after reading the spec on compositionend I'm not so sure. I think its valid that compositionend only gets fired when the IME is dismissed. If someone with a better understanding of the spec and browser quirks can take a look at this maybe we can come up with a solution.

@azack
Copy link

azack commented Mar 7, 2015

FWIW this workaround seems to work for me. I add a top-level decoration on the input directive that creates fake compositionend events:

.config(function ($provide) {
        $provide.decorator('inputDirective', function($delegate, $log) {
            $log.debug('Hijacking input directive');
            var directive = $delegate[0];
            angular.extend(directive.link, {
                post: function(scope, element, attr, ctrls) {
                    element.on('compositionupdate', function (event) {
                        $log.debug('Composition update, faking end');
                        element.triggerHandler('compositionend');
                    })
                }
            });
            return $delegate;
        });

This is probably wrong somehow and not robust or anything, but is maybe a first step towards a more solid workaround until it can be fixed/worked-aroudn in core angularjs. Here's a fork of @sylvhama 's plunkr with this added: http://plnkr.co/edit/4TY55ozh1D62sBDeUQxk?p=preview

@Narretz
Copy link
Contributor

Narretz commented Jun 9, 2016

I have tested this (to my ability) in Chrome, IE Edge, and IE11.
I have entered 'a,b,c,d' with the built-in Korean IME active. Pressing a, b, c, d transforms the first character in the input.
In Chrome, Edge and IE11, the model isn't updated until I press 'd'. Then, also a second character gets added to the input.
However, in Chrome and Edge, this second character is not yet part of the model, while it is added to the model in IE11.
I assume that Chrome and Edge do the right thing here, as the second charater isn't yet composed correctly. I'm not sure if there's anything Angular can do about this in IE11, though.

@prksean
Copy link

prksean commented Apr 6, 2017

@azack Hi, thank you for your solution! It seems to work fine for input boxes in IE. However, this solution does not seem to work in textarea tags. Does anyone have any idea on this? Thanks in advance.

@azack
Copy link

azack commented Apr 10, 2017

@prksean sorry I don't

@jileeon
Copy link
Contributor

jileeon commented Oct 12, 2017

Hi, I'm having same issue on 1.2.32.

It doesn't fixed. is that right?

@Narretz
Copy link
Contributor

Narretz commented Oct 12, 2017 via email

@jileeon
Copy link
Contributor

jileeon commented Oct 13, 2017

@Narretz Thank you for telling me this. I made the pull request #16273 to fix this. So It works fine in IE for any characters made by composition.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

8 participants