multi-byte composition failed in Internet Explorer #15947

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

export class MultiByteDirective {

    constructor(private el: ElementRef, private renderer: Renderer2) { }

   @HostListener("compositionstart")
    start(e:any):void {
        console.log("start", this.el.nativeElement.value);
    }

    @HostListener("compositionupdate")
    update(e:any):void {
        console.log("update", this.el.nativeElement.value);
    }


    @HostListener("compositionend")
    end(e:any):void {
        console.log("end", this.el.nativeElement.value);
    }
}

When I type composition language, Korean

It works fine in chrome.

type "한대맞자"

[Chrome]
start
update
update ㅎ
update 하
update 한
end 한
tart 한
update 한
update 한ㄷ
update 한대
update 한댐
end 한대
tart 한대
update 한대
update 한대마
update 한대맞
end 한대맞
start 한대맞
update 한대맞
update 한대맞ㅈ
end 한대맞자

and model value is same, '한대맞자'

but in IE,
[IE]

start ㅎ
update ㅎ
update 하
update 한
end 한ㄷ
start 한ㄷ
update 한ㄷ
update 한대
update 한댐
end 한대마
start 한대마
update 한대마
update 한대맞
end 한대맞ㅈ
start 한대맞ㅈ
update 한대맞ㅈ
update 한대맞자
update 한대맞자

model value is '한대맞ㅈ'

it doesn't end until i input a new character, even though the text-area/input box has right text, '한대맞자'.

Expected behavior

same as chrome

Minimal reproduction of the problem with instructions

I attached minimal demo above.

What is the motivation / use case for changing the behavior?

user must complete composition character as their expectation, not broken.

Please tell us about your environment:

• Angular version: 4.0.1

• Browser: [IE 11.0.20]

• Language: [all]

• Node (for AoT issues): node --version =