@vaadin/multi-select-combo-box 23.1.0 → 23.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "23.1.0",
+  "version": "23.1.3",
   "publishConfig": {
     "access": "public"
   },
@@ -33,18 +33,18 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/combo-box": "^23.1.0",
-    "@vaadin/component-base": "^23.1.0",
-    "@vaadin/field-base": "^23.1.0",
-    "@vaadin/input-container": "^23.1.0",
-    "@vaadin/vaadin-lumo-styles": "^23.1.0",
-    "@vaadin/vaadin-material-styles": "^23.1.0",
-    "@vaadin/vaadin-themable-mixin": "^23.1.0"
+    "@vaadin/combo-box": "^23.1.3",
+    "@vaadin/component-base": "^23.1.3",
+    "@vaadin/field-base": "^23.1.3",
+    "@vaadin/input-container": "^23.1.3",
+    "@vaadin/vaadin-lumo-styles": "^23.1.3",
+    "@vaadin/vaadin-material-styles": "^23.1.3",
+    "@vaadin/vaadin-themable-mixin": "^23.1.3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "322bba42b83f908a78cd972b06acadc5da95a69d"
+  "gitHead": "3066c296ad0ef652bc49417005523398199f1bf2"
 }

package/src/vaadin-multi-select-combo-box-internal.js

@@ -50,6 +50,14 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
 
   static get properties() {
     return {
+      /**
+       * A subset of items, filtered based on the user input.
+       */
+      filteredItems: {
+        type: Array,
+        notify: true,
+      },
+
       /**
        * When set to `true`, "loading" attribute is set
        * on the host and the overlay element.
@@ -78,6 +86,15 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
         value: () => [],
       },
 
+      /**
+       * Last input value entered by the user before value is updated.
+       * Used to store `filter` property value before clearing it.
+       */
+      lastFilter: {
+        type: String,
+        notify: true,
+      },
+
       _target: {
         type: Object,
       },
@@ -175,6 +192,18 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     super._closeOrCommit();
   }
 
+  /**
+   * @protected
+   * @override
+   */
+  _commitValue() {
+    // Store filter value for checking if user input is matching
+    // an item which is already selected, to not un-select it.
+    this.lastFilter = this.filter;
+
+    super._commitValue();
+  }
+
   /**
    * Override method inherited from the combo-box
    * to not update focused item when readonly.

package/src/vaadin-multi-select-combo-box.d.ts

@@ -305,13 +305,13 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
   addEventListener<K extends keyof MultiSelectComboBoxEventMap<TItem>>(
     type: K,
     listener: (this: MultiSelectComboBox<TItem>, ev: MultiSelectComboBoxEventMap<TItem>[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof MultiSelectComboBoxEventMap<TItem>>(
     type: K,
     listener: (this: MultiSelectComboBox<TItem>, ev: MultiSelectComboBoxEventMap<TItem>[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

package/src/vaadin-multi-select-combo-box.js

@@ -163,6 +163,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
           allow-custom-value="[[allowCustomValue]]"
           data-provider="[[dataProvider]]"
           filter="{{filter}}"
+          last-filter="{{_lastFilter}}"
           loading="{{loading}}"
           size="{{size}}"
           filtered-items="[[filteredItems]]"
@@ -173,6 +174,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
           on-combo-box-item-selected="_onComboBoxItemSelected"
           on-change="_onComboBoxChange"
           on-custom-value-set="_onCustomValueSet"
+          on-filtered-items-changed="_onFilteredItemsChanged"
         >
           <vaadin-multi-select-combo-box-container
             part="input-field"
@@ -440,6 +442,11 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         value: -1,
         observer: '_focusedChipIndexChanged',
       },
+
+      /** @private */
+      _lastFilter: {
+        type: String,
+      },
     };
   }
 
@@ -605,6 +612,20 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     }
   }
 
+  /**
+   * Implement two-way binding for the `filteredItems` property
+   * that can be set on the internal combo-box element.
+   *
+   * @param {CustomEvent} event
+   * @private
+   */
+  _onFilteredItemsChanged(event) {
+    const { value } = event.detail;
+    if (Array.isArray(value) || value == null) {
+      this.filteredItems = value;
+    }
+  }
+
   /** @private */
   _readonlyChanged(readonly, oldReadonly) {
     if (readonly || oldReadonly) {
@@ -728,7 +749,8 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     const itemsCopy = [...this.selectedItems];
     itemsCopy.splice(itemsCopy.indexOf(item), 1);
     this.__updateSelection(itemsCopy);
-    this.__announceItem(item, false, itemsCopy.length);
+    const itemLabel = this._getItemLabel(item);
+    this.__announceItem(itemLabel, false, itemsCopy.length);
   }
 
   /** @private */
@@ -741,8 +763,9 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     let isSelected = false;
 
     if (index !== -1) {
+      const lastFilter = this._lastFilter;
       // Do not unselect when manually typing and committing an already selected item.
-      if (this.filter.toLowerCase() === itemLabel.toLowerCase()) {
+      if (lastFilter && lastFilter.toLowerCase() === itemLabel.toLowerCase()) {
         this.__clearFilter();
         return;
       }
@@ -863,6 +886,18 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     announce(this.i18n.cleared);
   }
 
+  /**
+   * Override an event listener from `InputControlMixin` to
+   * stop the change event re-targeted from the input.
+   *
+   * @param {!Event} event
+   * @protected
+   * @override
+   */
+  _onChange(event) {
+    event.stopPropagation();
+  }
+
   /**
    * Override an event listener from `KeyboardMixin`.
    * Do not call `super` in order to override clear