Angular.js: textarea ng-model is not updated in IE with Korean IME.

Created on 12 Mar 2014  Â·  21Comments  Â·  Source: angular/angular.js

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

IE11 forms broken expected use

Most helpful comment

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

All 21 comments

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

I think this is a duplicate of #6058.

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

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

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

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

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

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

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

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

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.

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();

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()

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.

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.

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

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.

@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.

@prksean sorry I don't

Hi, I'm having same issue on 1.2.32.

It doesn't fixed. is that right?

It's not fixed unfortunately. If it gets fixed, it'll not happen in the
1.2.x branch because that one is in security fix only mode.

Am Do., 12. Okt. 2017 11:07 schrieb Jae Ik, Lee notifications@github.com:

Hi, I'm having same issue on 1.2.32.

Does it fixed yet right?

—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular.js/issues/6656#issuecomment-336067864,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABGYSWpjk-8E60QounsGCPLlzA8B2ZXFks5srdbCgaJpZM4Bo3xI
.

@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.

Was this page helpful?
0 / 5 - 0 ratings