@ui5/webcomponents 2.13.5 → 2.13.7

package/dist/MultiComboBox.d.ts

@@ -22,6 +22,7 @@ import ToggleButton from "./ToggleButton.js";
 import type ComboBoxFilter from "./types/ComboBoxFilter.js";
 import type { InputEventDetail } from "./Input.js";
 import type PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
+import type InputComposition from "./features/InputComposition.js";
 /**
  * Interface for components that may be slotted inside a `ui5-multi-combobox` as items
  * @public
@@ -245,6 +246,12 @@ declare class MultiComboBox extends UI5Element implements IFormInputElement {
      * @private
      */
     _linksListenersArray: Array<(args: any) => void>;
+    /**
+     * Indicates whether IME composition is currently active
+     * @default false
+     * @private
+     */
+    _isComposing: boolean;
     /**
      * Defines the component items.
      * @public
@@ -288,7 +295,10 @@ declare class MultiComboBox extends UI5Element implements IFormInputElement {
     _itemsBeforeOpen: Array<MultiComboboxItemWithSelection>;
     selectedItems: Array<IMultiComboBoxItem>;
     _valueStateLinks: Array<HTMLElement>;
+    _composition?: InputComposition;
+    _suppressNextLiveChange: boolean;
     static i18nBundle: I18nBundle;
+    static composition: typeof InputComposition;
     get formValidityMessage(): string;
     get formValidity(): ValidityStateFlags;
     formElementAnchor(): Promise<HTMLElement | undefined>;
@@ -389,6 +399,12 @@ declare class MultiComboBox extends UI5Element implements IFormInputElement {
     get _tokenizer(): Tokenizer;
     inputFocusIn(e: FocusEvent): void;
     inputFocusOut(e: FocusEvent): void;
+    /**
+     * Enables IME composition handling.
+     * Dynamically loads the InputComposition feature and sets up event listeners.
+     * @private
+     */
+    _enableComposition(): void;
     get editable(): boolean;
     get _isFocusInside(): boolean;
     get selectedItemsListMode(): "None" | "Multiple";

package/dist/MultiComboBox.js

@@ -236,6 +236,12 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
          * @private
          */
         this._linksListenersArray = [];
+        /**
+         * Indicates whether IME composition is currently active
+         * @default false
+         * @private
+         */
+        this._isComposing = false;
         this._filteredItems = [];
         this.selectedItems = [];
         this._previouslySelectedItems = [];
@@ -249,13 +255,16 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._lastValue = this.getAttribute("value") || "";
         this.currentItemIdx = -1;
         this._valueStateLinks = [];
+        this._suppressNextLiveChange = false;
     }
     onEnterDOM() {
         ResizeHandler.register(this, this._handleResizeBound);
+        this._enableComposition();
     }
     onExitDOM() {
         ResizeHandler.deregister(this, this._handleResizeBound);
         this._removeLinksEventListeners();
+        this._composition?.removeEventListeners();
     }
     _handleResize() {
         this._inputWidth = this.offsetWidth;
@@ -327,6 +336,11 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         return this.shadowRoot.querySelector("#ui5-multi-combobox-input");
     }
     _inputLiveChange(e) {
+        // This ensures proper input clearing after Enter-based token creation during composition
+        if (this._suppressNextLiveChange) {
+            this._suppressNextLiveChange = false;
+            return;
+        }
         const input = e.target;
         const value = input.value;
         const filteredItems = this._filterItems(value);
@@ -346,7 +360,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             }
         }
         this._effectiveValueState = this.valueState;
-        if (!filteredItems.length && value && !this.noValidation) {
+        if (!this._isComposing && !filteredItems.length && value && !this.noValidation) {
             const newValue = this.valueBeforeAutoComplete || this._inputLastValue;
             input.value = newValue;
             this.value = newValue;
@@ -355,7 +369,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._resetValueState(oldValueState);
             return;
         }
-        this._inputLastValue = input.value;
+        if (!this._isComposing) {
+            this._inputLastValue = input.value;
+        }
         this.value = input.value;
         this._filteredItems = filteredItems;
         if (!isPhone()) {
@@ -857,6 +873,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
                 this._previouslySelectedItems = this._getSelectedItems();
                 matchingItem.selected = true;
                 this.value = "";
+                // during composition prevent _inputLiveChange for proper input clearing
+                if (this._isComposing) {
+                    this._suppressNextLiveChange = true;
+                }
                 const changePrevented = this.fireSelectionChange();
                 if (changePrevented) {
                     this._revertSelection();
@@ -1142,7 +1162,6 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             this._allSelected = selectedListItemsCount > 0 && ((selectedListItemsCount === this.items.length) || (list?.getSlottedNodes("items").length === selectedListItemsCount));
         }
         this._effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
-        this._inputLastValue = value;
         if (input && !input.value) {
             this.valueBeforeAutoComplete = "";
             this._filteredItems = this._getItems();
@@ -1162,9 +1181,12 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         // If there is already a selection the autocomplete has already been performed
         if (this._shouldAutocomplete && !isAndroid()) {
             const item = this._getFirstMatchingItem(value);
-            // Keep the original typed in text intact
-            this.valueBeforeAutoComplete = value;
-            item && this._handleTypeAhead(item, value);
+            // Prevent typeahead during composition to avoid interfering with the composition process
+            if (!this._isComposing && item) {
+                // Keep the original typed in text intact
+                this.valueBeforeAutoComplete = value;
+                this._handleTypeAhead(item, value);
+            }
         }
         if (this._shouldFilterItems) {
             this._filteredItems = this._filterItems(this._shouldAutocomplete || !!autoCompletedChars ? this.valueBeforeAutoComplete : value);
@@ -1299,6 +1321,34 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             }
         }
     }
+    /**
+     * Enables IME composition handling.
+     * Dynamically loads the InputComposition feature and sets up event listeners.
+     * @private
+     */
+    _enableComposition() {
+        if (this._composition) {
+            return;
+        }
+        const setup = (InputCompositionClass) => {
+            this._composition = new InputCompositionClass({
+                getInputEl: () => this._innerInput,
+                updateCompositionState: (isComposing) => {
+                    this._isComposing = isComposing;
+                },
+            });
+            this._composition.addEventListeners();
+        };
+        if (MultiComboBox_1.composition) {
+            setup(MultiComboBox_1.composition);
+        }
+        else {
+            import("./features/InputComposition.js").then(CompositionModule => {
+                MultiComboBox_1.composition = CompositionModule.default;
+                setup(CompositionModule.default);
+            });
+        }
+    }
     get editable() {
         return !this.readonly;
     }
@@ -1636,6 +1686,9 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], MultiComboBox.prototype, "_linksListenersArray", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], MultiComboBox.prototype, "_isComposing", void 0);
 __decorate([
     slot({
         type: HTMLElement,