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

Author: aleksandar-terziev

packages/base/src/thirdparty/preact/jsx.d.ts

@@ -590,8 +590,10 @@ export namespace JSXInternal {
 
 		// Composition Events
 		onCompositionEnd?: CompositionEventHandler<Target> | undefined;
+		oncompositionend?: CompositionEventHandler<Target> | undefined;
 		onCompositionEndCapture?: CompositionEventHandler<Target> | undefined;
 		onCompositionStart?: CompositionEventHandler<Target> | undefined;
+		oncompositionstart?: CompositionEventHandler<Target> | undefined;
 		onCompositionStartCapture?: CompositionEventHandler<Target> | undefined;
 		onCompositionUpdate?: CompositionEventHandler<Target> | undefined;
 		onCompositionUpdateCapture?: CompositionEventHandler<Target> | undefined;

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,6 +703,9 @@ 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() {
@@ -715,6 +719,14 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 		this._removeLinksEventListeners();
 	}
 
+	_onCompositionStart() {
+		this._isComposing = true;
+	}
+
+	_onCompositionEnd() {
+		this._isComposing = false;
+	}
+
 	_highlightSuggestionItem(item: SuggestionItem) {
 		item.markupText = this.typedInValue ? this.Suggestions?.hightlightInput((item.text || ""), this.typedInValue) : encodeXML(item.text || "");
 	}
@@ -773,7 +785,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);

packages/main/src/InputTemplate.tsx

@@ -58,6 +58,8 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						onKeyUp={this._onkeyup}
 						onClick={this._click}
 						onFocusIn={this.innerFocusIn}
+						oncompositionstart={this._onCompositionStart}
+						oncompositionend={this._onCompositionEnd}
 					/>
 
 					{this._effectiveShowClearIcon &&