@vaadin/multi-select-combo-box 23.1.0-rc3 → 23.1.2

package/package.json

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

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

@@ -33,6 +33,15 @@ class MultiSelectComboBoxDropdown extends ComboBoxDropdown {
       ></vaadin-multi-select-combo-box-overlay>
     `;
   }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    // Set owner for using by item renderers
+    const comboBox = this.getRootNode().host;
+    this._scroller.comboBox = comboBox.getRootNode().host;
+  }
 }
 
 customElements.define(MultiSelectComboBoxDropdown.is, MultiSelectComboBoxDropdown);

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

@@ -50,6 +50,24 @@ 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.
+       * @type {boolean}
+       */
+      loading: {
+        type: Boolean,
+        notify: true,
+      },
+
       /**
        * Total number of items.
        * @type {number | undefined}
@@ -59,12 +77,34 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
         notify: true,
       },
 
+      /**
+       * Selected items to render in the dropdown
+       * when the component is read-only.
+       */
+      selectedItems: {
+        type: Array,
+        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,
       },
     };
   }
 
+  static get observers() {
+    return ['_readonlyItemsChanged(readonly, selectedItems)'];
+  }
+
   /**
    * Reference to the clear button element.
    * @protected
@@ -80,7 +120,7 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
    * @override
    */
   open() {
-    if (!this.disabled && !(this.readonly && this._getOverlayItems().length === 0)) {
+    if (!this.disabled && !(this.readonly && this.selectedItems.length === 0)) {
       this.opened = true;
     }
   }
@@ -152,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.
@@ -246,6 +298,50 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
       );
     }
   }
+
+  /**
+   * Override method inherited from the combo-box
+   * to render only selected items when read-only,
+   * even if a different set of items is provided.
+   *
+   * @protected
+   * @override
+   */
+  _setOverlayItems(items) {
+    const effectiveItems = this.readonly ? this.selectedItems : items;
+    super._setOverlayItems(effectiveItems);
+  }
+
+  /**
+   * Override method inherited from the combo-box
+   * to not request data provider when read-only.
+   *
+   * @param {number}
+   * @return {boolean}
+   * @protected
+   * @override
+   */
+  _shouldLoadPage(page) {
+    if (this.readonly) {
+      return false;
+    }
+
+    return super._shouldLoadPage(page);
+  }
+
+  /** @private */
+  _readonlyItemsChanged(readonly, selectedItems) {
+    if (readonly && selectedItems) {
+      this.__savedItems = this._getOverlayItems();
+      this._setOverlayItems(selectedItems);
+    }
+
+    // Restore the original dropdown items
+    if (readonly === false && this.__savedItems) {
+      this._setOverlayItems(this.__savedItems);
+      this.__savedItems = null;
+    }
+  }
 }
 
 customElements.define(MultiSelectComboBoxInternal.is, MultiSelectComboBoxInternal);

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

@@ -40,8 +40,7 @@ class MultiSelectComboBoxScroller extends ComboBoxScroller {
       return false;
     }
 
-    const host = this.comboBox.getRootNode().host;
-    return host._findIndex(item, host.selectedItems, itemIdPath) > -1;
+    return this.comboBox._findIndex(item, this.comboBox.selectedItems, itemIdPath) > -1;
   }
 
   /** @private */

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

@@ -3,7 +3,11 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ComboBoxDataProvider, ComboBoxDefaultItem, ComboBoxRenderer } from '@vaadin/combo-box/src/vaadin-combo-box.js';
+import {
+  ComboBoxDataProvider,
+  ComboBoxDefaultItem,
+  ComboBoxItemModel,
+} from '@vaadin/combo-box/src/vaadin-combo-box.js';
 import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
 import { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
@@ -20,6 +24,12 @@ import { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
 import { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
 import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+export type MultiSelectComboBoxRenderer<TItem> = (
+  root: HTMLElement,
+  comboBox: MultiSelectComboBox<TItem>,
+  model: ComboBoxItemModel<TItem>,
+) => void;
+
 export interface MultiSelectComboBoxI18n {
   cleared: string;
   focused: string;
@@ -112,6 +122,7 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * `invalid`              | Set when the element is invalid
  * `focused`              | Set when the element is focused
  * `focus-ring`           | Set when the element is keyboard focused
+ * `loading`              | Set when loading items from the data provider
  * `opened`               | Set when the dropdown is open
  * `readonly`             | Set to a readonly element
  *
@@ -231,6 +242,11 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
    */
   i18n: MultiSelectComboBoxI18n;
 
+  /**
+   * True when loading items from the data provider, false otherwise.
+   */
+  loading: boolean;
+
   /**
    * True if the dropdown is open, false otherwise.
    */
@@ -254,13 +270,13 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
    * Receives three arguments:
    *
    * - `root` The `<vaadin-multi-select-combo-box-item>` internal container DOM element.
-   * - `comboBox` The reference to the `<vaadin-combo-box>` element.
+   * - `comboBox` The reference to the `<vaadin-multi-select-combo-box>` element.
    * - `model` The object with the properties related with the rendered
    *   item, contains:
    *   - `model.index` The index of the rendered item.
    *   - `model.item` The item.
    */
-  renderer: ComboBoxRenderer<TItem> | null | undefined;
+  renderer: MultiSelectComboBoxRenderer<TItem> | null | undefined;
 
   /**
    * The list of selected items.
@@ -278,6 +294,14 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
    */
   clearCache(): void;
 
+  /**
+   * Requests an update for the content of items.
+   * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
+   *
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   */
+  requestContentUpdate(): void;
+
   addEventListener<K extends keyof MultiSelectComboBoxEventMap<TItem>>(
     type: K,
     listener: (this: MultiSelectComboBox<TItem>, ev: MultiSelectComboBoxEventMap<TItem>[K]) => void,

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

@@ -100,6 +100,7 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  * `invalid`              | Set when the element is invalid
  * `focused`              | Set when the element is focused
  * `focus-ring`           | Set when the element is keyboard focused
+ * `loading`              | Set when loading items from the data provider
  * `opened`               | Set when the dropdown is open
  * `readonly`             | Set to a readonly element
  *
@@ -162,14 +163,18 @@ 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]]"
+          selected-items="[[selectedItems]]"
           opened="{{opened}}"
           renderer="[[renderer]]"
           theme$="[[_theme]]"
           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"
@@ -298,6 +303,15 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         },
       },
 
+      /**
+       * True when loading items from the data provider, false otherwise.
+       */
+      loading: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+      },
+
       /**
        * When present, it specifies that the field is read-only.
        */
@@ -359,7 +373,6 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
        */
       dataProvider: {
         type: Object,
-        observer: '_dataProviderChanged',
       },
 
       /**
@@ -387,7 +400,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
        * Receives three arguments:
        *
        * - `root` The `<vaadin-multi-select-combo-box-item>` internal container DOM element.
-       * - `comboBox` The reference to the `<vaadin-combo-box>` element.
+       * - `comboBox` The reference to the `<vaadin-multi-select-combo-box>` element.
        * - `model` The object with the properties related with the rendered
        *   item, contains:
        *   - `model.index` The index of the rendered item.
@@ -429,6 +442,11 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         value: -1,
         observer: '_focusedChipIndexChanged',
       },
+
+      /** @private */
+      _lastFilter: {
+        type: String,
+      },
     };
   }
 
@@ -487,6 +505,18 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     }
   }
 
+  /**
+   * Requests an update for the content of items.
+   * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
+   *
+   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+   */
+  requestContentUpdate() {
+    if (this.$ && this.$.comboBox) {
+      this.$.comboBox.requestContentUpdate();
+    }
+  }
+
   /**
    * Override method inherited from `DisabledMixin` to forward disabled to chips.
    * @protected
@@ -582,15 +612,23 @@ 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) {
-      this.__savedItems = this.$.comboBox._getOverlayItems();
-      this.$.comboBox._setOverlayItems(Array.from(this.selectedItems));
-      this.__updateChips();
-    } else if (oldReadonly) {
-      this.$.comboBox._setOverlayItems(this.__savedItems);
-      this.__savedItems = null;
+    if (readonly || oldReadonly) {
       this.__updateChips();
     }
   }
@@ -637,12 +675,8 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     // Re-render chips
     this.__updateChips();
 
-    if (this.readonly) {
-      this.$.comboBox._setOverlayItems(selectedItems);
-    }
-
     // Update selected for dropdown items
-    this.$.comboBox.requestContentUpdate();
+    this.requestContentUpdate();
   }
 
   /** @private */
@@ -728,8 +762,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;
       }
@@ -850,6 +885,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