@vaadin/multi-select-combo-box 23.1.0-beta1 → 23.1.0-beta2

package/package.json

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

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

@@ -179,6 +179,10 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
    * @override
    */
   _onFocusout(event) {
+    // Disable combo-box logic that updates selectedItem
+    // based on the overlay focused index on input blur
+    this._ignoreCommitValue = true;
+
     super._onFocusout(event);
 
     if (this.readonly && !this._closeOnBlurIsPrevented) {
@@ -186,6 +190,26 @@ class MultiSelectComboBoxInternal extends ComboBoxDataProviderMixin(ComboBoxMixi
     }
   }
 
+  /**
+   * Override method inherited from the combo-box
+   * to not commit an already selected item again
+   * on blur, which would result in un-selecting.
+   * @protected
+   * @override
+   */
+  _detectAndDispatchChange() {
+    if (this._ignoreCommitValue) {
+      this._ignoreCommitValue = false;
+
+      // Reset internal combo-box state
+      this.selectedItem = null;
+      this._inputElementValue = '';
+      return;
+    }
+
+    super._detectAndDispatchChange();
+  }
+
   /**
    * @param {CustomEvent} event
    * @protected

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

@@ -22,6 +22,7 @@ import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themabl
 
 export interface MultiSelectComboBoxI18n {
   cleared: string;
+  focused: string;
   selected: string;
   deselected: string;
   total: string;
@@ -37,7 +38,7 @@ export type MultiSelectComboBoxChangeEvent<TItem> = Event & {
 /**
  * Fired when the user sets a custom value.
  */
-export type MultiSelectComboBoxCustomValuesSetEvent = CustomEvent<string>;
+export type MultiSelectComboBoxCustomValueSetEvent = CustomEvent<string>;
 
 /**
  * Fired when the `filter` property changes.
@@ -57,7 +58,7 @@ export type MultiSelectComboBoxSelectedItemsChangedEvent<TItem> = CustomEvent<{
 export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap {
   change: MultiSelectComboBoxChangeEvent<TItem>;
 
-  'custom-values-set': MultiSelectComboBoxCustomValuesSetEvent;
+  'custom-value-set': MultiSelectComboBoxCustomValueSetEvent;
 
   'filter-changed': MultiSelectComboBoxFilterChangedEvent;
 
@@ -137,7 +138,7 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change.
- * @fires {CustomEvent} custom-values-set - Fired when the user sets a custom value.
+ * @fires {CustomEvent} custom-value-set - Fired when the user sets a custom value.
  * @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
@@ -145,9 +146,9 @@ export interface MultiSelectComboBoxEventMap<TItem> extends HTMLElementEventMap
 declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLElement {
   /**
    * When true, the user can input a value that is not present in the items list.
-   * @attr {boolean} allow-custom-values
+   * @attr {boolean} allow-custom-value
    */
-  allowCustomValues: boolean;
+  allowCustomValue: boolean;
 
   /**
    * Set true to prevent the overlay from opening automatically.
@@ -216,6 +217,8 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
    * {
    *   // Screen reader announcement on clear button click.
    *   cleared: 'Selection cleared',
+   *   // Screen reader announcement when a chip is focused.
+   *   focused: ' focused. Press Backspace to remove',
    *   // Screen reader announcement when item is selected.
    *   selected: 'added to selection',
    *   // Screen reader announcement when item is deselected.
@@ -239,6 +242,13 @@ declare class MultiSelectComboBox<TItem = ComboBoxDefaultItem> extends HTMLEleme
    */
   pageSize: number;
 
+  /**
+   * A hint to the user of what can be entered in the control.
+   * The placeholder will be only displayed in the case when
+   * there is no item selected.
+   */
+  placeholder: string;
+
   /**
    * Custom function for rendering the content of every item.
    * Receives three arguments:

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

@@ -126,7 +126,7 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change.
- * @fires {CustomEvent} custom-values-set - Fired when the user sets a custom value.
+ * @fires {CustomEvent} custom-value-set - Fired when the user sets a custom value.
  * @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} selected-items-changed - Fired when the `selectedItems` property changes.
@@ -159,7 +159,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
           disabled="[[disabled]]"
           readonly="[[readonly]]"
           auto-open-disabled="[[autoOpenDisabled]]"
-          allow-custom-value="[[allowCustomValues]]"
+          allow-custom-value="[[allowCustomValue]]"
           data-provider="[[dataProvider]]"
           filter="{{filter}}"
           filtered-items="[[filteredItems]]"
@@ -268,6 +268,8 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
        * {
        *   // Screen reader announcement on clear button click.
        *   cleared: 'Selection cleared',
+       *   // Screen reader announcement when a chip is focused.
+       *   focused: ' focused. Press Backspace to remove',
        *   // Screen reader announcement when item is selected.
        *   selected: 'added to selection',
        *   // Screen reader announcement when item is deselected.
@@ -285,6 +287,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         value: () => {
           return {
             cleared: 'Selection cleared',
+            focused: 'focused. Press Backspace to remove',
             selected: 'added to selection',
             deselected: 'removed from selection',
             total: '{count} items selected',
@@ -351,13 +354,24 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
 
       /**
        * When true, the user can input a value that is not present in the items list.
-       * @attr {boolean} allow-custom-values
+       * @attr {boolean} allow-custom-value
        */
-      allowCustomValues: {
+      allowCustomValue: {
         type: Boolean,
         value: false,
       },
 
+      /**
+       * A hint to the user of what can be entered in the control.
+       * The placeholder will be only displayed in the case when
+       * there is no item selected.
+       */
+      placeholder: {
+        type: String,
+        value: '',
+        observer: '_placeholderChanged',
+      },
+
       /**
        * Custom function for rendering the content of every item.
        * Receives three arguments:
@@ -398,6 +412,13 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         type: Array,
         value: () => [],
       },
+
+      /** @private */
+      _focusedChipIndex: {
+        type: Number,
+        value: -1,
+        observer: '_focusedChipIndexChanged',
+      },
     };
   }
 
@@ -482,6 +503,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     super._setFocused(focused);
 
     if (!focused) {
+      this._focusedChipIndex = -1;
       this.validate();
     }
   }
@@ -559,6 +581,19 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     this.$.comboBox.pageSize = this.pageSize;
   }
 
+  /** @private */
+  _placeholderChanged(placeholder) {
+    const tmpPlaceholder = this.__tmpA11yPlaceholder;
+    // Do not store temporary placeholder
+    if (tmpPlaceholder !== placeholder) {
+      this.__savedPlaceholder = placeholder;
+
+      if (tmpPlaceholder) {
+        this.placeholder = tmpPlaceholder;
+      }
+    }
+  }
+
   /** @private */
   _selectedItemsChanged(selectedItems) {
     this._hasValue = Boolean(selectedItems && selectedItems.length);
@@ -567,9 +602,11 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
 
     // Use placeholder for announcing items
     if (this._hasValue) {
-      this.__savedPlaceholder = this.placeholder;
-      this.placeholder = selectedItems.map((item) => this._getItemLabel(item, this.itemLabelPath)).join(', ');
+      const tmpPlaceholder = selectedItems.map((item) => this._getItemLabel(item, this.itemLabelPath)).join(', ');
+      this.__tmpA11yPlaceholder = tmpPlaceholder;
+      this.placeholder = tmpPlaceholder;
     } else {
+      delete this.__tmpA11yPlaceholder;
       this.placeholder = this.__savedPlaceholder;
     }
 
@@ -797,8 +834,121 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
    */
   _onKeyDown(event) {
     const items = this.selectedItems || [];
-    if (!this.readonly && event.key === 'Backspace' && items.length && this.inputElement.value === '') {
-      this.__removeItem(items[items.length - 1]);
+
+    if (event.key === 'Escape' && this.clearButtonVisible && items.length) {
+      this.selectedItems = [];
+      return;
+    }
+
+    const chips = Array.from(this._chips).slice(1);
+
+    if (!this.readonly && chips.length > 0) {
+      switch (event.key) {
+        case 'Backspace':
+          this._onBackSpace(chips);
+          break;
+        case 'ArrowLeft':
+          this._onArrowLeft(chips);
+          break;
+        case 'ArrowRight':
+          this._onArrowRight(chips);
+          break;
+        default:
+          this._focusedChipIndex = -1;
+          break;
+      }
+    }
+  }
+
+  /** @private */
+  _onArrowLeft(chips) {
+    if (this.inputElement.value !== '' || this.opened) {
+      return;
+    }
+
+    const idx = this._focusedChipIndex;
+    let newIdx;
+
+    if (this.getAttribute('dir') !== 'rtl') {
+      if (idx === -1) {
+        // Focus last chip
+        newIdx = chips.length - 1;
+      } else if (idx > 0) {
+        // Focus prev chip
+        newIdx = idx - 1;
+      }
+    } else if (idx === chips.length - 1) {
+      // Blur last chip
+      newIdx = -1;
+    } else if (idx > -1) {
+      // Focus next chip
+      newIdx = idx + 1;
+    }
+
+    if (newIdx !== undefined) {
+      this._focusedChipIndex = newIdx;
+    }
+  }
+
+  /** @private */
+  _onArrowRight(chips) {
+    if (this.inputElement.value !== '' || this.opened) {
+      return;
+    }
+
+    const idx = this._focusedChipIndex;
+    let newIdx;
+
+    if (this.getAttribute('dir') === 'rtl') {
+      if (idx === -1) {
+        // Focus last chip
+        newIdx = chips.length - 1;
+      } else if (idx > 0) {
+        // Focus prev chip
+        newIdx = idx - 1;
+      }
+    } else if (idx === chips.length - 1) {
+      // Blur last chip
+      newIdx = -1;
+    } else if (idx > -1) {
+      // Focus next chip
+      newIdx = idx + 1;
+    }
+
+    if (newIdx !== undefined) {
+      this._focusedChipIndex = newIdx;
+    }
+  }
+
+  /** @private */
+  _onBackSpace(chips) {
+    if (this.inputElement.value !== '' || this.opened) {
+      return;
+    }
+
+    const idx = this._focusedChipIndex;
+    if (idx === -1) {
+      this._focusedChipIndex = chips.length - 1;
+    } else {
+      this.__removeItem(chips[idx].item);
+      this._focusedChipIndex = -1;
+    }
+  }
+
+  /** @private */
+  _focusedChipIndexChanged(focusedIndex, oldFocusedIndex) {
+    if (focusedIndex > -1 || oldFocusedIndex > -1) {
+      const chips = Array.from(this._chips).slice(1);
+      chips.forEach((chip, index) => {
+        chip.toggleAttribute('focused', index === focusedIndex);
+      });
+
+      // Announce focused chip
+      if (focusedIndex > -1) {
+        const item = chips[focusedIndex].item;
+        const itemLabel = this._getItemLabel(item, this.itemLabelPath);
+        announce(`${itemLabel} ${this.i18n.focused}`);
+      }
     }
   }
 
@@ -820,10 +970,13 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     // Do not set combo-box value
     event.preventDefault();
 
+    // Stop the original event
+    event.stopPropagation();
+
     this.__clearFilter();
 
     this.dispatchEvent(
-      new CustomEvent('custom-values-set', {
+      new CustomEvent('custom-value-set', {
         detail: event.detail,
         composed: true,
         bubbles: true,

package/theme/lumo/vaadin-multi-select-combo-box-chip-styles.js

@@ -22,6 +22,15 @@ const chip = css`
     cursor: var(--lumo-clickable-cursor);
   }
 
+  :host([focused]) {
+    background-color: var(--lumo-primary-color);
+    color: var(--lumo-primary-contrast-color);
+  }
+
+  :host([focused]) [part='remove-button'] {
+    color: inherit;
+  }
+
   :host(:not([part~='overflow']):not([readonly]):not([disabled])) {
     padding-inline-end: 0;
   }
@@ -36,19 +45,19 @@ const chip = css`
   :host([part~='overflow'])::after {
     position: absolute;
     content: '';
-    width: 3px;
-    height: calc(1.875em - 1px);
-    border-left: 2px solid;
-    border-radius: 4px 0 0 4px;
+    width: 100%;
+    height: 100%;
+    border-left: calc(var(--lumo-space-s) / 4) solid;
+    border-radius: var(--lumo-border-radius-s);
     border-color: var(--lumo-contrast-30pct);
   }
 
   :host([part~='overflow'])::before {
-    left: -4px;
+    left: calc(-1 * var(--lumo-space-s) / 2);
   }
 
   :host([part~='overflow'])::after {
-    left: -8px;
+    left: calc(-1 * var(--lumo-space-s));
   }
 
   :host([part~='overflow-two']) {
@@ -83,6 +92,7 @@ const chip = css`
     width: 1.25em;
     height: 1.25em;
     font-size: 1.5em;
+    transition: none;
   }
 
   [part='remove-button']::before {

package/theme/lumo/vaadin-multi-select-combo-box-styles.js

@@ -30,6 +30,10 @@ const multiSelectComboBox = css`
     padding-inline-start: 0;
   }
 
+  :host([has-value]) ::slotted(input:placeholder-shown) {
+    caret-color: var(--lumo-body-text-color) !important;
+  }
+
   [part~='chip']:not(:last-of-type) {
     margin-inline-end: var(--lumo-space-xs);
   }

package/theme/material/vaadin-multi-select-combo-box-chip-styles.js

@@ -15,11 +15,15 @@ const chip = css`
     margin-inline-end: 0.25rem;
     padding: 0 0.5rem;
     border-radius: 4px;
-    background-color: hsla(214, 53%, 23%, 0.1);
+    background-color: rgba(0, 0, 0, 0.08);
     cursor: default;
     font-family: var(--material-font-family);
   }
 
+  :host([focused]) {
+    background-color: rgba(0, 0, 0, 0.16);
+  }
+
   :host(:not([part~='overflow']):not([readonly]):not([disabled])) {
     padding-inline-end: 0;
   }
@@ -33,19 +37,19 @@ const chip = css`
   :host([part~='overflow'])::after {
     position: absolute;
     content: '';
-    width: 3px;
-    height: 20px;
-    border-left: 2px solid;
-    border-radius: 4px 0 0 4px;
-    border-color: hsla(214, 53%, 23%, 0.1);
+    width: 100%;
+    height: 100%;
+    border-left: 0.125rem solid;
+    border-radius: 0.25rem;
+    border-color: rgba(0, 0, 0, 0.08);
   }
 
   :host([part~='overflow'])::before {
-    left: -4px;
+    left: -0.25rem;
   }
 
   :host([part~='overflow'])::after {
-    left: -8px;
+    left: -0.5rem;
   }
 
   :host([part~='overflow-two']) {

package/theme/material/vaadin-multi-select-combo-box-styles.js

@@ -25,6 +25,10 @@ registerStyles(
 );
 
 const multiSelectComboBox = css`
+  :host([has-value]) ::slotted(input:placeholder-shown) {
+    caret-color: var(--material-body-text-color) !important;
+  }
+
   [part='input-field'] {
     height: auto;
     min-height: 32px;