diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 28121cf27f3..3f6f465c683 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -22,6 +22,7 @@ export class Input implements ComponentInterface { private inputId = `ion-input-${inputIds++}`; private didBlurAfterEdit = false; private inheritedAttributes: { [k: string]: any } = {}; + private isComposing = false; /** * This is required for a WebKit bug which requires us to @@ -231,7 +232,7 @@ export class Input implements ComponentInterface { */ @Watch('value') protected valueChanged() { - if (this.nativeInput) { + if (this.nativeInput && !this.isComposing) { /** * Assigning the native input's value on attribute * value change, allows `ionInput` implementations @@ -260,12 +261,27 @@ export class Input implements ComponentInterface { } } + componentDidLoad() { + const nativeInput = this.nativeInput; + if (nativeInput) { + // TODO: FW-729 Update to JSX bindings when Stencil resolves bug with: + // https://github.com/ionic-team/stencil/issues/3235 + nativeInput.addEventListener('compositionstart', this.onCompositionStart); + nativeInput.addEventListener('compositionend', this.onCompositionEnd); + } + } + disconnectedCallback() { if (Build.isBrowser) { document.dispatchEvent(new CustomEvent('ionInputDidUnload', { detail: this.el })); } + const nativeInput = this.nativeInput; + if (nativeInput) { + nativeInput.removeEventListener('compositionstart', this.onCompositionStart); + nativeInput.removeEventListener('compositionEnd', this.onCompositionEnd); + } } /** @@ -364,6 +380,14 @@ export class Input implements ComponentInterface { } } + private onCompositionStart = () => { + this.isComposing = true; + } + + private onCompositionEnd = () => { + this.isComposing = false; + } + private clearTextOnEnter = (ev: KeyboardEvent) => { if (ev.key === 'Enter') { this.clearTextInput(ev); } }