@vaadin/multi-select-combo-box 25.3.0-dev.3a3c2d7d2a → 25.3.0

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

@@ -79,15 +79,6 @@ export const MultiSelectComboBoxMixin = (superClass) =>
           sync: true,
         },
 
-        /**
-         * Path for the id of the item, used to detect whether the item is selected.
-         * @attr {string} item-id-path
-         */
-        itemIdPath: {
-          type: String,
-          sync: true,
-        },
-
         /**
          * When true, filter string isn't cleared after selecting an item.
          */
@@ -216,9 +207,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     static get observers() {
       return [
         '_selectedItemsChanged(selectedItems)',
-        '__openedOrItemsChanged(opened, _dropdownItems, loading, __keepOverlayOpened)',
         '__updateOverflowChip(_overflow, _overflowItems, disabled, readonly)',
-        '__updateScroller(opened, _dropdownItems, _focusedIndex, _theme)',
         '__updateTopGroup(selectedItemsOnTop, selectedItems, opened)',
       ];
     }
@@ -342,7 +331,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     updated(props) {
       super.updated(props);
 
-      ['loading', 'itemIdPath', 'itemClassNameGenerator', 'renderer'].forEach((prop) => {
+      ['loading', 'itemClassNameGenerator', 'renderer'].forEach((prop) => {
         if (props.has(prop)) {
           this._scroller[prop] = this[prop];
         }
@@ -433,21 +422,18 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     }
 
     /**
-     * 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.
+     * Override method from `ComboBoxBaseMixin` to only open the dropdown
+     * when clicking on the label or the input field.
+     * @param {Event} event
+     * @protected
+     * @override
      */
-    requestContentUpdate() {
-      if (!this._scroller) {
-        return;
-      }
+    _onHostClick(event) {
+      const path = event.composedPath();
 
-      this._scroller.requestContentUpdate();
-
-      this._getItemElements().forEach((item) => {
-        item.requestContentUpdate();
-      });
+      if (path.includes(this._labelNode) || path.includes(this._inputField)) {
+        super._onHostClick(event);
+      }
     }
 
     /**
@@ -474,37 +460,15 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       }
     }
 
-    /** @private */
-    __updateScroller(opened, items, focusedIndex, theme) {
-      if (opened) {
-        this._scroller.style.maxHeight =
-          getComputedStyle(this).getPropertyValue(`--${this._tagNamePrefix}-overlay-max-height`) || '65vh';
-      }
-
-      this._scroller.setProperties({
-        items: opened ? items : [],
-        opened,
-        focusedIndex,
-        theme,
-      });
-    }
-
-    /** @private */
-    __openedOrItemsChanged(opened, items, loading, keepOverlayOpened) {
-      // Close the overlay if there are no items to display.
-      // See https://github.com/vaadin/vaadin-combo-box/pull/964
-      this._overlayOpened = opened && (keepOverlayOpened || loading || !!items?.length);
-    }
-
     /**
+     * Override method from `ComboBoxBaseMixin` to revert the input to the
+     * filter, as this component does not use `value` for the input text.
      * @protected
+     * @override
      */
-    _closeOrCommit() {
-      if (!this.opened) {
-        this._commitValue();
-      } else {
-        this.close();
-      }
+    _revertInputValue() {
+      this._inputElementValue = this.filter;
+      this._clearSelectionRange();
     }
 
     /**
@@ -535,6 +499,16 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     __commitUserInput() {
       if (this._focusedIndex > -1) {
         const focusedItem = this._dropdownItems[this._focusedIndex];
+        // Do not unselect an already selected item when it was focused by
+        // filtering, in which case the input value still equals the filter.
+        if (
+          this._lastFilter &&
+          this._lastFilter === this._inputElementValue &&
+          this._findIndex(focusedItem, this.selectedItems) !== -1
+        ) {
+          this.__clearInternalValue();
+          return;
+        }
         this.__selectItem(focusedItem);
       } else if (this._inputElementValue) {
         // Detect if input value doesn't match an existing item
@@ -572,7 +546,11 @@ export const MultiSelectComboBoxMixin = (superClass) =>
      * @protected
      */
     _setFocused(focused) {
-      if (!focused) {
+      // Do not validate, commit or close on internal blur triggered
+      // on overlay touch action needed to hide the virtual keyboard.
+      const blurred = !focused && !this._closeOnBlurIsPrevented;
+
+      if (blurred) {
         this._ignoreCommitValue = true;
       }
 
@@ -580,12 +558,12 @@ export const MultiSelectComboBoxMixin = (superClass) =>
 
       // Do not validate when focusout is caused by document
       // losing focus, which happens on browser tab switch.
-      if (!focused && document.hasFocus()) {
+      if (blurred && document.hasFocus()) {
         this._focusedChipIndex = -1;
         this._requestValidation();
       }
 
-      if (!focused && this.readonly && !this._closeOnBlurIsPrevented) {
+      if (blurred && this.readonly) {
         this.close();
       }
     }
@@ -689,67 +667,34 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     }
 
     /**
-     * Override combo-box method to group selected
-     * items at the top of the overlay.
+     * Override method from `ComboBoxItemsMixin` to show only selected
+     * items when read-only, and to group selected items at the top
+     * of the overlay when `selectedItemsOnTop` is set.
      *
      * @protected
      * @override
      */
     _setDropdownItems(items) {
+      super._setDropdownItems(this.__generateDropdownItems(items));
+    }
+
+    /** @private */
+    __generateDropdownItems(items) {
       if (this.readonly) {
-        this.__setDropdownItems(this.selectedItems);
-        return;
+        return this.selectedItems;
       }
 
       if (this.filter || !this.selectedItemsOnTop) {
-        this.__setDropdownItems(items);
-        return;
+        return items;
       }
 
       if (items?.length && this._topGroup?.length) {
         // Filter out items included to the top group.
-        const filteredItems = items.filter((item) => this._findIndex(item, this._topGroup, this.itemIdPath) === -1);
-
-        this.__setDropdownItems(this._topGroup.concat(filteredItems));
-        return;
+        const filteredItems = items.filter((item) => this._findIndex(item, this._topGroup) === -1);
+        return this._topGroup.concat(filteredItems);
       }
 
-      this.__setDropdownItems(items);
-    }
-
-    /** @private */
-    __setDropdownItems(newItems) {
-      const oldItems = this._dropdownItems;
-      this._dropdownItems = newItems;
-
-      // Store the currently focused item if any. The focused index preserves
-      // in the case when more filtered items are loading but it is reset
-      // when the user types in a filter query.
-      const focusedItem = oldItems ? oldItems[this._focusedIndex] : null;
-
-      // When both the previously-focused entry and the new entry at the
-      // same index are placeholders (e.g. the Flow connector mid-scroll
-      // re-pushing `__setDropdownItems`), preserve `_focusedIndex` until
-      // a follow-up call lands a real item at that position.
-      if (
-        oldItems &&
-        oldItems[this._focusedIndex] instanceof ComboBoxPlaceholder &&
-        newItems[this._focusedIndex] instanceof ComboBoxPlaceholder
-      ) {
-        return;
-      }
-
-      // Try to first set focus on the item that had been focused before `newItems` were updated
-      // if it is still present in the `newItems` array. Otherwise, set the focused index
-      // depending on the selected item or the filter query.
-      const focusedItemIndex = this.__getItemIndexByValue(newItems, this._getItemValue(focusedItem));
-      if (focusedItemIndex > -1) {
-        this._focusedIndex = focusedItemIndex;
-      } else {
-        // When the user filled in something that is different from the current value = filtering is enabled,
-        // set the focused index to the item that matches the filter query.
-        this._focusedIndex = this.__getItemIndexByLabel(newItems, this.filter);
-      }
+      return items;
     }
 
     /** @private */
@@ -758,17 +703,8 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     }
 
     /** @private */
-    _findIndex(item, selectedItems, itemIdPath) {
-      if (itemIdPath && item) {
-        for (let index = 0; index < selectedItems.length; index++) {
-          if (selectedItems[index] && selectedItems[index][itemIdPath] === item[itemIdPath]) {
-            return index;
-          }
-        }
-        return -1;
-      }
-
-      return selectedItems.indexOf(item);
+    _findIndex(item, items) {
+      return items.findIndex((other) => this._isSameItem(item, other));
     }
 
     /**
@@ -801,7 +737,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     /** @private */
     __removeItem(item) {
       const itemsCopy = [...this.selectedItems];
-      itemsCopy.splice(itemsCopy.indexOf(item), 1);
+      itemsCopy.splice(this._findIndex(item, itemsCopy), 1);
       this.__updateSelection(itemsCopy);
       const itemLabel = this._getItemLabel(item);
       this.__announceItem(itemLabel, false, itemsCopy.length);
@@ -811,7 +747,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     __selectItem(item) {
       const itemsCopy = [...this.selectedItems];
 
-      const index = this._findIndex(item, itemsCopy, this.itemIdPath);
+      const index = this._findIndex(item, itemsCopy);
       const itemLabel = this._getItemLabel(item);
 
       let isSelected = false;
@@ -865,7 +801,7 @@ export const MultiSelectComboBoxMixin = (superClass) =>
       return (
         this._topGroup &&
         this._topGroup.some((item) => {
-          const selectedItem = this.selectedItems[this._findIndex(item, this.selectedItems, this.itemIdPath)];
+          const selectedItem = this.selectedItems[this._findIndex(item, this.selectedItems)];
           return selectedItem && item !== selectedItem;
         })
       );
@@ -1060,19 +996,16 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     }
 
     /**
-     * Override method from `ComboBoxBaseMixin` to deselect
-     * dropdown item by requesting content update on clear.
+     * Override method from `ComboBoxItemsMixin` to stop
+     * propagation of the clear button click event.
      * @param {Event} event
      * @protected
+     * @override
      */
     _onClearButtonClick(event) {
       event.stopPropagation();
 
       super._onClearButtonClick(event);
-
-      if (this.opened) {
-        this.requestContentUpdate();
-      }
     }
 
     /**
@@ -1314,6 +1247,10 @@ export const MultiSelectComboBoxMixin = (superClass) =>
     _overlaySelectedItemChanged(event) {
       event.stopPropagation();
 
+      if (this.hasAttribute('closing')) {
+        return;
+      }
+
       // Do not un-select on click when readonly
       if (this.readonly) {
         return;

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

@@ -17,6 +17,7 @@ import { multiSelectComboBoxOverlayStyles } from './styles/vaadin-multi-select-c
 /**
  * An element used internally by `<vaadin-multi-select-combo-box>`. Not intended to be used separately.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-multi-select-combo-box-overlay
  * @extends HTMLElement
  * @private

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

@@ -17,7 +17,7 @@ import { multiSelectComboBoxScrollerStyles } from './styles/vaadin-multi-select-
  * @extends HTMLElement
  * @private
  */
-export class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolylitMixin(LitElement)) {
+class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolylitMixin(LitElement)) {
   static get is() {
     return 'vaadin-multi-select-combo-box-scroller';
   }
@@ -43,10 +43,12 @@ export class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolylitMi
   }
 
   /**
+   * Override method from `ComboBoxScrollerMixin` to check
+   * the item against the selected items of the owner.
    * @protected
    * @override
    */
-  _isItemSelected(item, _selectedItem, itemIdPath) {
+  _isItemSelected(item) {
     if (item instanceof ComboBoxPlaceholder) {
       return false;
     }
@@ -55,7 +57,7 @@ export class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolylitMi
       return false;
     }
 
-    return this.owner._findIndex(item, this.owner.selectedItems, itemIdPath) > -1;
+    return this.owner.selectedItems.some((selectedItem) => this.owner._isSameItem(item, selectedItem));
   }
 
   /**
@@ -72,3 +74,5 @@ export class MultiSelectComboBoxScroller extends ComboBoxScrollerMixin(PolylitMi
 }
 
 defineCustomElement(MultiSelectComboBoxScroller);
+
+export { MultiSelectComboBoxScroller };

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

@@ -133,12 +133,59 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  *
  * The following custom CSS properties are available for styling:
  *
- * 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`
+ * Custom CSS property                                     |
+ * :-------------------------------------------------------|
+ * | `--vaadin-chip-background`                            |
+ * | `--vaadin-chip-border-color`                          |
+ * | `--vaadin-chip-border-radius`                         |
+ * | `--vaadin-chip-border-width`                          |
+ * | `--vaadin-chip-font-size`                             |
+ * | `--vaadin-chip-font-weight`                           |
+ * | `--vaadin-chip-gap`                                   |
+ * | `--vaadin-chip-height`                                |
+ * | `--vaadin-chip-padding`                               |
+ * | `--vaadin-chip-remove-button-text-color`              |
+ * | `--vaadin-chip-text-color`                            |
+ * | `--vaadin-field-default-width`                        |
+ * | `--vaadin-input-field-background`                     |
+ * | `--vaadin-input-field-border-color`                   |
+ * | `--vaadin-input-field-border-radius`                  |
+ * | `--vaadin-input-field-border-width`                   |
+ * | `--vaadin-input-field-bottom-end-radius`              |
+ * | `--vaadin-input-field-bottom-start-radius`            |
+ * | `--vaadin-input-field-button-text-color`              |
+ * | `--vaadin-input-field-container-gap`                  |
+ * | `--vaadin-input-field-disabled-background`            |
+ * | `--vaadin-input-field-disabled-text-color`            |
+ * | `--vaadin-input-field-error-color`                    |
+ * | `--vaadin-input-field-error-font-size`                |
+ * | `--vaadin-input-field-error-font-weight`              |
+ * | `--vaadin-input-field-error-line-height`              |
+ * | `--vaadin-input-field-gap`                            |
+ * | `--vaadin-input-field-helper-color`                   |
+ * | `--vaadin-input-field-helper-font-size`               |
+ * | `--vaadin-input-field-helper-font-weight`             |
+ * | `--vaadin-input-field-helper-line-height`             |
+ * | `--vaadin-input-field-label-color`                    |
+ * | `--vaadin-input-field-label-font-size`                |
+ * | `--vaadin-input-field-label-font-weight`              |
+ * | `--vaadin-input-field-label-line-height`              |
+ * | `--vaadin-input-field-padding`                        |
+ * | `--vaadin-input-field-placeholder-color`              |
+ * | `--vaadin-input-field-required-indicator`             |
+ * | `--vaadin-input-field-required-indicator-color`       |
+ * | `--vaadin-input-field-top-end-radius`                 |
+ * | `--vaadin-input-field-top-start-radius`               |
+ * | `--vaadin-input-field-value-color`                    |
+ * | `--vaadin-input-field-value-font-size`                |
+ * | `--vaadin-input-field-value-font-weight`              |
+ * | `--vaadin-input-field-value-line-height`              |
+ * | `--vaadin-item-overlay-padding`                       |
+ * | `--vaadin-multi-select-combo-box-chip-min-width`      |
+ * | `--vaadin-multi-select-combo-box-chips-gap`           |
+ * | `--vaadin-multi-select-combo-box-input-min-width`     |
+ * | `--vaadin-multi-select-combo-box-overlay-max-height`  |
+ * | `--vaadin-multi-select-combo-box-overlay-width`       |
  *
  * ### Internal components
  *

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

@@ -71,12 +71,59 @@ import { MultiSelectComboBoxMixin } from './vaadin-multi-select-combo-box-mixin.
  *
  * The following custom CSS properties are available for styling:
  *
- * 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`
+ * Custom CSS property                                     |
+ * :-------------------------------------------------------|
+ * | `--vaadin-chip-background`                            |
+ * | `--vaadin-chip-border-color`                          |
+ * | `--vaadin-chip-border-radius`                         |
+ * | `--vaadin-chip-border-width`                          |
+ * | `--vaadin-chip-font-size`                             |
+ * | `--vaadin-chip-font-weight`                           |
+ * | `--vaadin-chip-gap`                                   |
+ * | `--vaadin-chip-height`                                |
+ * | `--vaadin-chip-padding`                               |
+ * | `--vaadin-chip-remove-button-text-color`              |
+ * | `--vaadin-chip-text-color`                            |
+ * | `--vaadin-field-default-width`                        |
+ * | `--vaadin-input-field-background`                     |
+ * | `--vaadin-input-field-border-color`                   |
+ * | `--vaadin-input-field-border-radius`                  |
+ * | `--vaadin-input-field-border-width`                   |
+ * | `--vaadin-input-field-bottom-end-radius`              |
+ * | `--vaadin-input-field-bottom-start-radius`            |
+ * | `--vaadin-input-field-button-text-color`              |
+ * | `--vaadin-input-field-container-gap`                  |
+ * | `--vaadin-input-field-disabled-background`            |
+ * | `--vaadin-input-field-disabled-text-color`            |
+ * | `--vaadin-input-field-error-color`                    |
+ * | `--vaadin-input-field-error-font-size`                |
+ * | `--vaadin-input-field-error-font-weight`              |
+ * | `--vaadin-input-field-error-line-height`              |
+ * | `--vaadin-input-field-gap`                            |
+ * | `--vaadin-input-field-helper-color`                   |
+ * | `--vaadin-input-field-helper-font-size`               |
+ * | `--vaadin-input-field-helper-font-weight`             |
+ * | `--vaadin-input-field-helper-line-height`             |
+ * | `--vaadin-input-field-label-color`                    |
+ * | `--vaadin-input-field-label-font-size`                |
+ * | `--vaadin-input-field-label-font-weight`              |
+ * | `--vaadin-input-field-label-line-height`              |
+ * | `--vaadin-input-field-padding`                        |
+ * | `--vaadin-input-field-placeholder-color`              |
+ * | `--vaadin-input-field-required-indicator`             |
+ * | `--vaadin-input-field-required-indicator-color`       |
+ * | `--vaadin-input-field-top-end-radius`                 |
+ * | `--vaadin-input-field-top-start-radius`               |
+ * | `--vaadin-input-field-value-color`                    |
+ * | `--vaadin-input-field-value-font-size`                |
+ * | `--vaadin-input-field-value-font-weight`              |
+ * | `--vaadin-input-field-value-line-height`              |
+ * | `--vaadin-item-overlay-padding`                       |
+ * | `--vaadin-multi-select-combo-box-chip-min-width`      |
+ * | `--vaadin-multi-select-combo-box-chips-gap`           |
+ * | `--vaadin-multi-select-combo-box-input-min-width`     |
+ * | `--vaadin-multi-select-combo-box-overlay-max-height`  |
+ * | `--vaadin-multi-select-combo-box-overlay-width`       |
  *
  * ### Internal components
  *
@@ -96,6 +143,7 @@ import { MultiSelectComboBoxMixin } from './vaadin-multi-select-combo-box-mixin.
  * @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-multi-select-combo-box
  * @extends HTMLElement
  */