5efc86069f
This commit fixes a regression where `ngModel` no longer syncs
letter by letter on Android devices, and instead syncs at the
end of every word. This broke when we introduced buffering of
IME events so IMEs like Pinyin keyboards or Katakana keyboards
wouldn't display composition strings. Unfortunately, iOS devices
and Android devices have opposite event behavior. Whereas iOS
devices fire composition events for IME keyboards only, Android
fires composition events for Latin-language keyboards. For
this reason, languages like English don't work as expected on
Android if we always buffer. So to support both platforms,
composition string buffering will only be turned on by default
for non-Android devices.
However, we have also added a `COMPOSITION_BUFFER_MODE` token
to make this configurable by the application. In some cases, apps
might might still want to receive intermediate values. For example,
some inputs begin searching based on Latin letters before a
character selection is made.
As a provider, this is fairly flexible. If you want to turn
composition buffering off, simply provide the token at the top
level:
```ts
providers: [
{provide: COMPOSITION_BUFFER_MODE, useValue: false}
]
```
Or, if you want to change the mode based on locale or platform,
you can use a factory:
```ts
import {shouldUseBuffering} from 'my/lib';
....
providers: [
{provide: COMPOSITION_BUFFER_MODE, useFactory: shouldUseBuffering}
]
```
Closes #15079.
PR Close #15256
99 lines
3.3 KiB
TypeScript
99 lines
3.3 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google Inc. All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.io/license
|
|
*/
|
|
|
|
import {Directive, ElementRef, Inject, InjectionToken, Optional, Renderer, forwardRef} from '@angular/core';
|
|
import {ɵgetDOM as getDOM} from '@angular/platform-browser';
|
|
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
|
|
|
|
export const DEFAULT_VALUE_ACCESSOR: any = {
|
|
provide: NG_VALUE_ACCESSOR,
|
|
useExisting: forwardRef(() => DefaultValueAccessor),
|
|
multi: true
|
|
};
|
|
|
|
/**
|
|
* We must check whether the agent is Android because composition events
|
|
* behave differently between iOS and Android.
|
|
*/
|
|
function _isAndroid(): boolean {
|
|
const userAgent = getDOM() ? getDOM().getUserAgent() : '';
|
|
return /android (\d+)/.test(userAgent.toLowerCase());
|
|
}
|
|
|
|
/**
|
|
* Turn this mode on if you want form directives to buffer IME input until compositionend
|
|
* @experimental
|
|
*/
|
|
export const COMPOSITION_BUFFER_MODE = new InjectionToken<boolean>('CompositionEventMode');
|
|
|
|
/**
|
|
* The default accessor for writing a value and listening to changes that is used by the
|
|
* {@link NgModel}, {@link FormControlDirective}, and {@link FormControlName} directives.
|
|
*
|
|
* ### Example
|
|
* ```
|
|
* <input type="text" name="searchQuery" ngModel>
|
|
* ```
|
|
*
|
|
* @stable
|
|
*/
|
|
@Directive({
|
|
selector:
|
|
'input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]',
|
|
// TODO: vsavkin replace the above selector with the one below it once
|
|
// https://github.com/angular/angular/issues/3011 is implemented
|
|
// selector: '[ngModel],[formControl],[formControlName]',
|
|
host: {
|
|
'(input)': '_handleInput($event.target.value)',
|
|
'(blur)': 'onTouched()',
|
|
'(compositionstart)': '_compositionStart()',
|
|
'(compositionend)': '_compositionEnd($event.target.value)'
|
|
},
|
|
providers: [DEFAULT_VALUE_ACCESSOR]
|
|
})
|
|
export class DefaultValueAccessor implements ControlValueAccessor {
|
|
onChange = (_: any) => {};
|
|
onTouched = () => {};
|
|
|
|
/** Whether the user is creating a composition string (IME events). */
|
|
private _composing = false;
|
|
|
|
constructor(
|
|
private _renderer: Renderer, private _elementRef: ElementRef,
|
|
@Optional() @Inject(COMPOSITION_BUFFER_MODE) private _compositionMode: boolean) {
|
|
if (this._compositionMode == null) {
|
|
this._compositionMode = !_isAndroid();
|
|
}
|
|
}
|
|
|
|
writeValue(value: any): void {
|
|
const normalizedValue = value == null ? '' : value;
|
|
this._renderer.setElementProperty(this._elementRef.nativeElement, 'value', normalizedValue);
|
|
}
|
|
|
|
registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
|
|
registerOnTouched(fn: () => void): void { this.onTouched = fn; }
|
|
|
|
setDisabledState(isDisabled: boolean): void {
|
|
this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
|
|
}
|
|
|
|
_handleInput(value: any): void {
|
|
if (!this._compositionMode || (this._compositionMode && !this._composing)) {
|
|
this.onChange(value);
|
|
}
|
|
}
|
|
|
|
_compositionStart(): void { this._composing = true; }
|
|
|
|
_compositionEnd(value: any): void {
|
|
this._composing = false;
|
|
this._compositionMode && this.onChange(value);
|
|
}
|
|
}
|