@ui5/webcomponents 2.15.0-rc.0 → 2.15.0-rc.2

package/dist/Input.d.ts

@@ -15,6 +15,7 @@ import type PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import type { ListItemClickEventDetail, ListSelectionChangeEventDetail } from "./List.js";
 import type ResponsivePopover from "./ResponsivePopover.js";
 import type InputKeyHint from "./types/InputKeyHint.js";
+import type InputComposition from "./features/InputComposition.js";
 /**
  * Interface for components that represent a suggestion item, usable in `ui5-input`
  * @public
@@ -310,6 +311,12 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormInpu
      * @private
      */
     _linksListenersArray: Array<(args: any) => void>;
+    /**
+     * Indicates whether IME composition is currently active
+     * @default false
+     * @private
+     */
+    _isComposing: boolean;
     /**
      * Defines the suggestion items.
      *
@@ -363,7 +370,9 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormInpu
     _isLatestValueFromSuggestions: boolean;
     _isChangeTriggeredBySuggestion: boolean;
     _valueStateLinks: Array<HTMLElement>;
+    _composition?: InputComposition;
     static i18nBundle: I18nBundle;
+    static composition: typeof InputComposition;
     /**
      * Indicates whether link navigation is being handled.
      * @default false
@@ -433,6 +442,12 @@ declare class Input extends UI5Element implements SuggestionComponent, IFormInpu
     _handleValueStatePopoverAfterClose(): void;
     _getValueStatePopover(): Popover;
     enableSuggestions(): void;
+    /**
+     * Enables IME composition handling.
+     * Dynamically loads the InputComposition feature and sets up event listeners.
+     * @private
+     */
+    _enableComposition(): void;
     acceptSuggestion(item: IInputSuggestionItemSelectable, keyboardUsed: boolean): void;
     /**
      * Updates the input value on item select.

package/dist/Input.js

@@ -226,6 +226,12 @@ let Input = Input_1 = class Input extends UI5Element {
          * @private
          */
         this._linksListenersArray = [];
+        /**
+         * Indicates whether IME composition is currently active
+         * @default false
+         * @private
+         */
+        this._isComposing = false;
         /**
          * Indicates whether link navigation is being handled.
          * @default false
@@ -266,11 +272,13 @@ let Input = Input_1 = class Input extends UI5Element {
     onEnterDOM() {
         ResizeHandler.register(this, this._handleResizeBound);
         registerUI5Element(this, this._updateAssociatedLabelsTexts.bind(this));
+        this._enableComposition();
     }
     onExitDOM() {
         ResizeHandler.deregister(this, this._handleResizeBound);
         deregisterUI5Element(this);
         this._removeLinksEventListeners();
+        this._composition?.removeEventListeners();
     }
     _highlightSuggestionItem(item) {
         item.markupText = this.typedInValue ? this.Suggestions?.hightlightInput((item.text || ""), this.typedInValue) : encodeXML(item.text || "");
@@ -324,7 +332,9 @@ let Input = Input_1 = class Input extends UI5Element {
         if (this._shouldAutocomplete && !isAndroid() && !autoCompletedChars && !this._isKeyNavigation) {
             const item = this._getFirstMatchingItem(value);
             if (item) {
-                this._handleTypeAhead(item);
+                if (!this._isComposing) {
+                    this._handleTypeAhead(item);
+                }
                 this._selectMatchingItem(item);
             }
         }
@@ -777,6 +787,7 @@ let Input = Input_1 = class Input extends UI5Element {
         // Set initial focus to the native input
         if (isPhone()) {
             (this.getInputDOMRef()).focus();
+            this._composition?.addEventListeners();
         }
         this._handlePickerAfterOpen();
     }
@@ -841,6 +852,34 @@ let Input = Input_1 = class Input extends UI5Element {
             });
         }
     }
+    /**
+     * Enables IME composition handling.
+     * Dynamically loads the InputComposition feature and sets up event listeners.
+     * @private
+     */
+    _enableComposition() {
+        if (this._composition) {
+            return;
+        }
+        const setup = (FeatureClass) => {
+            this._composition = new FeatureClass({
+                getInputEl: () => this.getInputDOMRefSync(),
+                updateCompositionState: (isComposing) => {
+                    this._isComposing = isComposing;
+                },
+            });
+            this._composition.addEventListeners();
+        };
+        if (Input_1.composition) {
+            setup(Input_1.composition);
+        }
+        else {
+            import("./features/InputComposition.js").then(CompositionModule => {
+                Input_1.composition = CompositionModule.default;
+                setup(CompositionModule.default);
+            });
+        }
+    }
     acceptSuggestion(item, keyboardUsed) {
         if (this._isGroupItem(item)) {
             return;
@@ -1374,6 +1413,9 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], Input.prototype, "_linksListenersArray", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], Input.prototype, "_isComposing", void 0);
 __decorate([
     slot({ type: HTMLElement, "default": true })
 ], Input.prototype, "suggestionItems", void 0);