Repository: angular
Issue: DefaultValueAccessor doesn't update the model correctly when entering CJK characters with an IME that has autocorrect
Labels: area: forms,forms: ControlValueAccessor,P4

# 🐞 bug report

### Affected Package

The issue is caused by package @angular/forms

### Is this a regression?

No, seems to have always been there since it was implemented.

### Description

The model is not updated correctly by `DefaultValueAccessor` when using an IME to enter CJK characters that use composition. `COMPOSITION_BUFFER_MODE` waits until `compositionend` event to update the model, but that event is skipped when the keyboard has autocorrect on and the user focuses another field without confirming the last entered character.

Related information:

* [Similar bug in AngularJS](https://stackoverflow.com/a/49505054). They suggest to use `autocorrect="off"` at the input, but obviously you could want to keep that functionality and still have the model updated.

* [Explanation from Chrome team](https://bugs.chromium.org/p/chromium/issues/detail?id=818881#c9) about the way the keyboard works is by design:

> The composition text in the case in the video recording is "a" with the underline effect. "compositionend" event will appear after the underlined text is committed by, e.g. SPACE key.


## 🔬 Minimal Reproduction
https://stackblitz.com/edit/angular-composition-buffer-mode?file=src%2Fapp%2Fcomp-true.component.ts

You can try using a CJK keyboard with autocorrect and then:

* Start a composition
* Focus another field with the mouse without pressing space or enter
* For the fields that use `COMPOSITION_BUFFER_MODE = true` the model is not updated.

## 🌍  Your Environment

**Angular Version:**
<pre><code>Angular CLI: 8.3.23
Node: 10.18.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.23
@angular-devkit/build-angular     0.803.23
@angular-devkit/build-optimizer   0.803.23
@angular-devkit/build-webpack     0.803.23
@angular-devkit/core              8.3.23
@angular-devkit/schematics        8.3.23
@angular/cdk                      8.2.3
@angular/cli                      8.3.23
@ngtools/webpack                  8.3.23
@schematics/angular               8.3.23
@schematics/update                0.803.23
rxjs                              6.5.4
typescript                        3.5.3
webpack                           4.39.2
</code></pre>

**Anything else relevant?**

This happens with Chrome, Safari, IE... it has to do with the IME used.

The easy workaround for apps is `COMPOSITION_BUFFER_MODE = false`, that solves the issue.

However, this could be easily solved in the framework by updating the model on blur, understanding that it does the same effect as `compositionend` in [`DefaultValueAccessor`](https://github.com/angular/angular/blob/1537791f06df5d85dd27e763836fd99bb1530991/packages/forms/src/directives/default_value_accessor.ts#L145) with a code like:

```ts
/** @internal */
_blur(value: any): void {
  this._composing = false;
  this._compositionMode && this._composing && this.onChange(value);
  this.onTouched();
}
```