fix(ui5-input): prevent typeahead during IME composition

Author: aleksandar-terziev

packages/main/src/Input.ts

@@ -606,6 +606,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 	})
 	valueStateMessage!: Array<HTMLElement>;
 
+	_isComposing: boolean;
 	hasSuggestionItemSelected: boolean;
 	valueBeforeItemSelection: string;
 	valueBeforeSelectionStart: string;
@@ -702,17 +703,38 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 		this._keepInnerValue = false;
 		this._focusedAfterClear = false;
 		this._valueStateLinks = [];
+
+		// Used to track if the user is composing text.
+		this._isComposing = false;
 	}
 
 	onEnterDOM() {
 		ResizeHandler.register(this, this._handleResizeBound);
 		registerUI5Element(this, this._updateAssociatedLabelsTexts.bind(this));
+		const input = this.getInputDOMRefSync();
+		if (input) {
+			input.addEventListener("compositionstart", this._onCompositionStart.bind(this));
+			input.addEventListener("compositionend", this._onCompositionEnd.bind(this));
+		}
 	}
 
 	onExitDOM() {
 		ResizeHandler.deregister(this, this._handleResizeBound);
 		deregisterUI5Element(this);
 		this._removeLinksEventListeners();
+		const input = this.getInputDOMRefSync();
+		if (input) {
+			input.removeEventListener("compositionstart", this._onCompositionStart.bind(this));
+			input.removeEventListener("compositionend", this._onCompositionEnd.bind(this));
+		}
+	}
+
+	_onCompositionStart() {
+		this._isComposing = true;
+	}
+
+	_onCompositionEnd() {
+		this._isComposing = false;
 	}
 
 	_highlightSuggestionItem(item: SuggestionItem) {
@@ -773,7 +795,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 
 		// Typehead causes issues on Android devices, so we disable it for now
 		// If there is already a selection the autocomplete has already been performed
-		if (this._shouldAutocomplete && !isAndroid() && !autoCompletedChars && !this._isKeyNavigation) {
+		if (this._shouldAutocomplete && !isAndroid() && !autoCompletedChars && !this._isKeyNavigation && !this._isComposing) {
 			const item = this._getFirstMatchingItem(value);
 			if (item) {
 				this._handleTypeAhead(item);