@vaadin/multi-select-combo-box 23.2.0-alpha2 → 23.2.0-dev.48e5e3967

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/multi-select-combo-box",
-  "version": "23.2.0-alpha2",
+  "version": "23.2.0-dev.48e5e3967",
   "publishConfig": {
     "access": "public"
   },
@@ -35,19 +35,19 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/combo-box": "23.2.0-alpha2",
-    "@vaadin/component-base": "23.2.0-alpha2",
-    "@vaadin/field-base": "23.2.0-alpha2",
-    "@vaadin/input-container": "23.2.0-alpha2",
-    "@vaadin/lit-renderer": "23.2.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha2",
-    "@vaadin/vaadin-material-styles": "23.2.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha2"
+    "@vaadin/combo-box": "23.2.0-dev.48e5e3967",
+    "@vaadin/component-base": "23.2.0-dev.48e5e3967",
+    "@vaadin/field-base": "23.2.0-dev.48e5e3967",
+    "@vaadin/input-container": "23.2.0-dev.48e5e3967",
+    "@vaadin/lit-renderer": "23.2.0-dev.48e5e3967",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-dev.48e5e3967",
+    "@vaadin/vaadin-material-styles": "23.2.0-dev.48e5e3967",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-dev.48e5e3967"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "c9b8113d0fa9a602f8b9cb915c1826355af2e8df"
+  "gitHead": "961bc4ae5b707c3c02f12b99819b3c12c9b478aa"
 }

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

@@ -87,6 +87,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,
       },
@@ -195,6 +204,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

@@ -131,6 +131,7 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * Custom property                                      | Description                | Default
  * -----------------------------------------------------|----------------------------|--------
  * `--vaadin-field-default-width`                       | Default width of the field | `12em`
+ * `--vaadin-multi-select-combo-box-overlay-width`      | Width of the overlay       | `auto`
  * `--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
  * `--vaadin-multi-select-combo-box-input-min-width`    | Min width of the input     | `4em`
  *

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

@@ -109,6 +109,7 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  * Custom property                                      | Description                | Default
  * -----------------------------------------------------|----------------------------|--------
  * `--vaadin-field-default-width`                       | Default width of the field | `12em`
+ * `--vaadin-multi-select-combo-box-overlay-width`      | Width of the overlay       | `auto`
  * `--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
  * `--vaadin-multi-select-combo-box-input-min-width`    | Min width of the input     | `4em`
  *
@@ -163,6 +164,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="[[__effectiveFilteredItems]]"
@@ -453,6 +455,11 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         value: -1,
         observer: '_focusedChipIndexChanged',
       },
+
+      /** @private */
+      _lastFilter: {
+        type: String,
+      },
     };
   }
 
@@ -768,8 +775,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;
       }