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

package/dist/MultiComboBox.js

@@ -40,7 +40,7 @@ import ListItemStandard from "./ListItemStandard.js";
 import ToggleButton from "./ToggleButton.js";
 import * as Filters from "./Filters.js";
 import Button from "./Button.js";
-import { VALUE_STATE_SUCCESS, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_INFORMATION, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, VALUE_STATE_LINK, VALUE_STATE_LINKS, VALUE_STATE_LINK_MAC, VALUE_STATE_LINKS_MAC, INPUT_SUGGESTIONS_TITLE, SELECT_OPTIONS, SHOW_SELECTED_BUTTON, MULTICOMBOBOX_DIALOG_OK_BUTTON, COMBOBOX_AVAILABLE_OPTIONS, VALUE_STATE_ERROR_ALREADY_SELECTED, MCB_SELECTED_ITEMS, INPUT_CLEAR_ICON_ACC_NAME, FORM_MIXED_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
+import { VALUE_STATE_SUCCESS, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_INFORMATION, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, VALUE_STATE_LINK, VALUE_STATE_LINKS, VALUE_STATE_LINK_MAC, VALUE_STATE_LINKS_MAC, INPUT_SUGGESTIONS_TITLE, SELECT_OPTIONS, SHOW_SELECTED_BUTTON, MULTICOMBOBOX_DIALOG_OK_BUTTON, MULTICOMBOBOX_DIALOG_CANCEL_BUTTON, COMBOBOX_AVAILABLE_OPTIONS, VALUE_STATE_ERROR_ALREADY_SELECTED, MCB_SELECTED_ITEMS, INPUT_CLEAR_ICON_ACC_NAME, FORM_MIXED_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
 // Templates
 import MultiComboBoxTemplate from "./MultiComboBoxTemplate.js";
 // Styles
@@ -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;
@@ -313,6 +322,7 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     _showFilteredItems() {
         this.filterSelected = true;
         this._showMorePressed = true;
+        this._tokenizer._scrollToEndOnExpand = true;
         this._toggleTokenizerPopover();
     }
     filterSelectedItems(e) {
@@ -327,6 +337,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);
@@ -504,11 +519,19 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             }
         });
     }
-    _handlePaste(e) {
-        if (this.readonly || !e.clipboardData) {
+    async _handlePaste(e) {
+        if (this.readonly) {
             return;
         }
-        const pastedText = (e.clipboardData).getData("text/plain");
+        e.preventDefault();
+        const pastedText = await navigator.clipboard.readText();
+        document.execCommand("insertText", true, pastedText ?? "");
+        const inputEvent = new Event("input", {
+            bubbles: true,
+            cancelable: true,
+        });
+        // Dispatch it
+        this._innerInput.dispatchEvent(inputEvent);
         if (!pastedText) {
             return;
         }
@@ -526,7 +549,15 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         if (this.readonly || isFirefox()) {
             return;
         }
+        e.preventDefault();
         const pastedText = await navigator.clipboard.readText();
+        document.execCommand("insertText", true, pastedText ?? "");
+        const inputEvent = new Event("input", {
+            bubbles: true,
+            cancelable: true,
+        });
+        // Dispatch it
+        this._innerInput.dispatchEvent(inputEvent);
         if (!pastedText) {
             return;
         }
@@ -857,6 +888,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();
@@ -1164,7 +1199,10 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
             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) {
+                this._handleTypeAhead(item, value);
+            }
         }
         if (this._shouldFilterItems) {
             this._filteredItems = this._filterItems(this._shouldAutocomplete || !!autoCompletedChars ? this.valueBeforeAutoComplete : value);
@@ -1182,11 +1220,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
         this._tokenizer._handleResize();
         this._tokenizer.preventInitialFocus = true;
         if (this.open && !isPhone()) {
+            this._tokenizer._scrollToEndOnExpand = true;
             this._tokenizer.expanded = true;
         }
-        if (this._tokenizer.expanded && this.hasAttribute("focused")) {
-            this._tokenizer.scrollToEnd();
-        }
         if (!arraysAreEqual(this._valueStateLinks, this.linksInAriaValueStateHiddenText)) {
             this._removeLinksEventListeners();
             this._addLinksEventListeners();
@@ -1262,8 +1298,8 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     inputFocusIn(e) {
         if (!isPhone()) {
             this.focused = true;
+            this._tokenizer._scrollToEndOnExpand = true;
             this._tokenizer.expanded = true;
-            this._tokenizer.scrollToEnd();
         }
         else {
             this._innerInput.blur();
@@ -1299,6 +1335,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;
     }
@@ -1459,6 +1523,9 @@ let MultiComboBox = MultiComboBox_1 = class MultiComboBox extends UI5Element {
     get _dialogOkButton() {
         return MultiComboBox_1.i18nBundle.getText(MULTICOMBOBOX_DIALOG_OK_BUTTON);
     }
+    get _dialogCancelButton() {
+        return MultiComboBox_1.i18nBundle.getText(MULTICOMBOBOX_DIALOG_CANCEL_BUTTON);
+    }
     get _tokenizerExpanded() {
         if (isPhone()) {
             return false;
@@ -1636,6 +1703,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,