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

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

@@ -7,6 +7,7 @@ import './vaadin-multi-select-combo-box-chip.js';
 import './vaadin-multi-select-combo-box-container.js';
 import './vaadin-multi-select-combo-box-internal.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { announce } from '@vaadin/component-base/src/a11y-announcer.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
@@ -18,7 +19,6 @@ import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixi
 
 const multiSelectComboBox = css`
   :host {
-    --chip-min-width: var(--vaadin-multi-select-combo-box-chip-min-width, 4em);
     --input-min-width: var(--vaadin-multi-select-combo-box-input-min-width, 4em);
   }
 
@@ -26,6 +26,11 @@ const multiSelectComboBox = css`
     display: none !important;
   }
 
+  #chips {
+    display: flex;
+    align-items: center;
+  }
+
   :host([has-value]) ::slotted(input:placeholder-shown) {
     color: transparent !important;
   }
@@ -37,16 +42,17 @@ const multiSelectComboBox = css`
 
   [part='chip'] {
     flex: 0 1 auto;
-    min-width: var(--chip-min-width);
   }
 
-  :host([readonly]) [part~='chip'] {
-    pointer-events: none;
+  :host(:is([readonly], [disabled])) ::slotted(input) {
+    flex-grow: 0;
+    flex-basis: 0;
+    padding: 0;
   }
 `;
 
 registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectComboBox], {
-  moduleId: 'vaadin-multi-select-combo-box-styles'
+  moduleId: 'vaadin-multi-select-combo-box-styles',
 });
 
 /**
@@ -69,6 +75,7 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  *
  * Part name              | Description
  * -----------------------|----------------
+ * `chips`                | The element that wraps chips for selected items
  * `chip`                 | Chip shown for every selected item
  * `label`                | The label element
  * `input-field`          | The element that wraps prefix, value and suffix
@@ -102,7 +109,6 @@ registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectCo
  * -----------------------------------------------------|----------------------------|--------
  * `--vaadin-field-default-width`                       | Default width of the field | `12em`
  * `--vaadin-multi-select-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
- * `--vaadin-multi-select-combo-box-chip-min-width`     | Min width of the chip      | `60px`
  * `--vaadin-multi-select-combo-box-input-min-width`    | Min width of the input     | `4em`
  *
  * ### Internal components
@@ -120,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.
@@ -153,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]]"
@@ -172,14 +178,17 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
             theme$="[[theme]]"
           >
             <vaadin-multi-select-combo-box-chip
+              id="overflow"
               slot="prefix"
               part$="[[_getOverflowPart(_overflowItems.length)]]"
               disabled="[[disabled]]"
+              readonly="[[readonly]]"
               label="[[_getOverflowLabel(_overflowItems.length)]]"
               title$="[[_getOverflowTitle(_overflowItems)]]"
               hidden$="[[_isOverflowHidden(_overflowItems.length)]]"
               on-mousedown="_preventBlur"
             ></vaadin-multi-select-combo-box-chip>
+            <div id="chips" part="chips" slot="prefix"></div>
             <slot name="input"></slot>
             <div id="clearButton" part="clear-button" slot="suffix"></div>
             <div id="toggleButton" class="toggle-button" part="toggle-button" slot="suffix"></div>
@@ -213,7 +222,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         type: Boolean,
         reflectToAttribute: true,
         observer: '_clearButtonVisibleChanged',
-        value: false
+        value: false,
       },
 
       /**
@@ -221,7 +230,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
        * The items can be of either `String` or `Object` type.
        */
       items: {
-        type: Array
+        type: Array,
       },
 
       /**
@@ -229,7 +238,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
        * @attr {string} item-label-path
        */
       itemLabelPath: {
-        type: String
+        type: String,
       },
 
       /**
@@ -238,7 +247,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
        * @attr {string} item-value-path
        */
       itemValuePath: {
-        type: String
+        type: String,
       },
 
       /**
@@ -246,7 +255,54 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
        * @attr {string} item-id-path
        */
       itemIdPath: {
-        type: String
+        type: String,
+      },
+
+      /**
+       * The object used to localize this component.
+       * To change the default localization, replace the entire
+       * _i18n_ object or just the property you want to modify.
+       *
+       * The object has the following JSON structure and default values:
+       * ```
+       * {
+       *   // 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.
+       *   deselected: 'removed from selection',
+       *   // Screen reader announcement of the selected items count.
+       *   // {count} is replaced with the actual count of items.
+       *   total: '{count} items selected',
+       * }
+       * ```
+       * @type {!MultiSelectComboBoxI18n}
+       * @default {English/US}
+       */
+      i18n: {
+        type: Object,
+        value: () => {
+          return {
+            cleared: 'Selection cleared',
+            focused: 'focused. Press Backspace to remove',
+            selected: 'added to selection',
+            deselected: 'removed from selection',
+            total: '{count} items selected',
+          };
+        },
+      },
+
+      /**
+       * When present, it specifies that the field is read-only.
+       */
+      readonly: {
+        type: Boolean,
+        value: false,
+        observer: '_readonlyChanged',
+        reflectToAttribute: true,
       },
 
       /**
@@ -256,7 +312,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
       selectedItems: {
         type: Array,
         value: () => [],
-        notify: true
+        notify: true,
       },
 
       /**
@@ -266,7 +322,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         type: Boolean,
         notify: true,
         value: false,
-        reflectToAttribute: true
+        reflectToAttribute: true,
       },
 
       /**
@@ -276,7 +332,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
       pageSize: {
         type: Number,
         value: 50,
-        observer: '_pageSizeChanged'
+        observer: '_pageSizeChanged',
       },
 
       /**
@@ -293,16 +349,27 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
        */
       dataProvider: {
         type: Object,
-        observer: '_dataProviderChanged'
+        observer: '_dataProviderChanged',
       },
 
       /**
        * 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
+        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',
       },
 
       /**
@@ -324,7 +391,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
       filter: {
         type: String,
         value: '',
-        notify: true
+        notify: true,
       },
 
       /**
@@ -337,14 +404,21 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
       /** @protected */
       _hasValue: {
         type: Boolean,
-        value: false
+        value: false,
       },
 
       /** @private */
       _overflowItems: {
         type: Array,
-        value: () => []
-      }
+        value: () => [],
+      },
+
+      /** @private */
+      _focusedChipIndex: {
+        type: Number,
+        value: -1,
+        observer: '_focusedChipIndexChanged',
+      },
     };
   }
 
@@ -376,7 +450,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
         this._setFocusElement(input);
         this.stateTarget = input;
         this.ariaTarget = input;
-      })
+      }),
     );
     this.addController(new LabelledInputController(this.inputElement, this._labelController));
 
@@ -391,7 +465,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
    * @return {boolean}
    */
   checkValidity() {
-    return this.required ? this._hasValue : true;
+    return this.required && !this.readonly ? this._hasValue : true;
   }
 
   /**
@@ -403,9 +477,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     super._disabledChanged(disabled, oldDisabled);
 
     if (disabled || oldDisabled) {
-      this._chips.forEach((chip) => {
-        chip.toggleAttribute('disabled', disabled);
-      });
+      this.__updateChips();
     }
   }
 
@@ -431,6 +503,7 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     super._setFocused(focused);
 
     if (!focused) {
+      this._focusedChipIndex = -1;
       this.validate();
     }
   }
@@ -454,6 +527,26 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     this.__updateChips();
   }
 
+  /**
+   * Override method from `DelegateStateMixin` to set required state
+   * using `aria-required` attribute instead of `required`, in order
+   * to prevent screen readers from announcing "invalid entry".
+   * @protected
+   * @override
+   */
+  _delegateAttribute(name, value) {
+    if (!this.stateTarget) {
+      return;
+    }
+
+    if (name === 'required') {
+      this._delegateAttribute('aria-required', value ? 'true' : false);
+      return;
+    }
+
+    super._delegateAttribute(name, value);
+  }
+
   /**
    * Setting clear button visible reduces total space available
    * for rendering chips, and making it hidden increases it.
@@ -465,6 +558,19 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     }
   }
 
+  /** @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;
+      this.__updateChips();
+    }
+  }
+
   /** @private */
   _pageSizeChanged(pageSize, oldPageSize) {
     if (Math.floor(pageSize) !== pageSize || pageSize <= 0) {
@@ -475,15 +581,42 @@ 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);
 
     this._toggleHasValue();
 
+    // Use placeholder for announcing items
+    if (this._hasValue) {
+      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;
+    }
+
     // Re-render chips
     this.__updateChips();
 
+    if (this.readonly) {
+      this.$.comboBox._setOverlayItems(selectedItems);
+    }
+
     // Re-render scroller
     this.$.comboBox.$.dropdown._scroller.requestContentUpdate();
 
@@ -546,11 +679,19 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     this.$.comboBox.clear();
   }
 
+  /** @private */
+  __announceItem(itemLabel, isSelected, itemCount) {
+    const state = isSelected ? 'selected' : 'deselected';
+    const total = this.i18n.total.replace('{count}', itemCount || 0);
+    announce(`${itemLabel} ${this.i18n[state]} ${total}`);
+  }
+
   /** @private */
   __removeItem(item) {
     const itemsCopy = [...this.selectedItems];
     itemsCopy.splice(itemsCopy.indexOf(item), 1);
     this.__updateSelection(itemsCopy);
+    this.__announceItem(item, false, itemsCopy.length);
   }
 
   /** @private */
@@ -558,9 +699,13 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     const itemsCopy = [...this.selectedItems];
 
     const index = this._findIndex(item, itemsCopy, this.itemIdPath);
+    const itemLabel = this._getItemLabel(item, this.itemLabelPath);
+
+    let isSelected = false;
+
     if (index !== -1) {
       // Do not unselect when manually typing and committing an already selected item.
-      if (this.filter.toLowerCase() === this._getItemLabel(item, this.itemLabelPath).toLowerCase()) {
+      if (this.filter.toLowerCase() === itemLabel.toLowerCase()) {
         this.__clearFilter();
         return;
       }
@@ -568,12 +713,15 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
       itemsCopy.splice(index, 1);
     } else {
       itemsCopy.push(item);
+      isSelected = true;
     }
 
     this.__updateSelection(itemsCopy);
 
     // Suppress `value-changed` event.
     this.__clearFilter();
+
+    this.__announceItem(itemLabel, isSelected, itemsCopy.length);
   }
 
   /** @private */
@@ -592,7 +740,8 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     chip.setAttribute('slot', 'prefix');
 
     chip.item = item;
-    chip.toggleAttribute('disabled', this.disabled);
+    chip.disabled = this.disabled;
+    chip.readonly = this.readonly;
 
     const label = this._getItemLabel(item, this.itemLabelPath);
     chip.label = label;
@@ -605,18 +754,21 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
   }
 
   /** @private */
-  __getMinWidth(chip) {
+  __getOverflowWidth() {
+    const chip = this.$.overflow;
+
     chip.style.visibility = 'hidden';
-    chip.style.display = 'block';
-    chip.style.minWidth = 'var(--chip-min-width)';
+    chip.removeAttribute('hidden');
 
-    const result = parseInt(getComputedStyle(chip).minWidth);
+    // Detect max possible width of the overflow chip
+    chip.setAttribute('part', 'chip overflow');
+    const overflowStyle = getComputedStyle(chip);
+    const overflowWidth = chip.clientWidth + parseInt(overflowStyle.marginInlineStart);
 
-    chip.style.minWidth = '';
-    chip.style.display = '';
+    chip.setAttribute('hidden', '');
     chip.style.visibility = '';
 
-    return result;
+    return overflowWidth;
   }
 
   /** @private */
@@ -626,46 +778,36 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     }
 
     // Clear all chips except the overflow
-    const chips = Array.from(this._chips).reverse();
-    const overflow = chips.pop();
-
-    chips.forEach((chip) => {
-      chip.remove();
+    Array.from(this._chips).forEach((chip) => {
+      if (chip !== this.$.overflow) {
+        chip.remove();
+      }
     });
 
     const items = [...this.selectedItems];
 
-    let refNode = overflow.nextElementSibling;
+    // Detect available remaining width for chips
+    const totalWidth = this._inputField.$.wrapper.clientWidth;
+    const inputWidth = parseInt(getComputedStyle(this.inputElement).flexBasis);
 
-    // Use overflow chip to measure min-width
-    const chipMinWidth = this.__getMinWidth(overflow);
-    const inputMinWidth = parseInt(getComputedStyle(this.inputElement).flexBasis);
-    const containerStyle = getComputedStyle(this._inputField);
+    let remainingWidth = totalWidth - inputWidth;
 
-    // Detect available width for chips
-    let totalWidth =
-      parseInt(containerStyle.width) -
-      parseInt(containerStyle.paddingLeft) -
-      parseInt(containerStyle.paddingRight) -
-      this.$.toggleButton.clientWidth -
-      inputMinWidth;
-
-    if (this.clearButtonVisible) {
-      totalWidth -= this.$.clearButton.clientWidth;
+    if (items.length > 1) {
+      remainingWidth -= this.__getOverflowWidth();
     }
 
-    for (let i = items.length - 1; i >= 0; i--) {
-      // Ensure there is enough space for another chip
-      if (totalWidth < chipMinWidth) {
+    // Add chips until remaining width is exceeded
+    for (let i = items.length - 1, refNode = null; i >= 0; i--) {
+      const chip = this.__createChip(items[i]);
+      this.$.chips.insertBefore(chip, refNode);
+
+      if (this.$.chips.clientWidth > remainingWidth) {
+        chip.remove();
         break;
       }
 
-      const item = items.pop();
-      const chip = this.__createChip(item);
-      this._inputField.insertBefore(chip, refNode);
-
+      items.pop();
       refNode = chip;
-      totalWidth -= chipMinWidth;
     }
 
     this._overflowItems = items;
@@ -680,6 +822,8 @@ class MultiSelectComboBox extends ResizeMixin(InputControlMixin(ThemableMixin(El
     event.stopPropagation();
 
     this.__updateSelection([]);
+
+    announce(this.i18n.cleared);
   }
 
   /**
@@ -690,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}`);
+      }
     }
   }
 
@@ -713,14 +970,17 @@ 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
-      })
+        bubbles: true,
+      }),
     );
   }