@vaadin/combo-box 22.0.0-beta2 → 22.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "22.0.0-beta2",
+  "version": "22.0.2",
   "publishConfig": {
     "access": "public"
   },
@@ -34,23 +34,23 @@
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "22.0.0-beta2",
-    "@vaadin/field-base": "22.0.0-beta2",
-    "@vaadin/input-container": "22.0.0-beta2",
-    "@vaadin/item": "22.0.0-beta2",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-beta2",
-    "@vaadin/vaadin-material-styles": "22.0.0-beta2",
-    "@vaadin/vaadin-overlay": "22.0.0-beta2",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-beta2"
+    "@vaadin/component-base": "^22.0.2",
+    "@vaadin/field-base": "^22.0.2",
+    "@vaadin/input-container": "^22.0.2",
+    "@vaadin/item": "^22.0.2",
+    "@vaadin/vaadin-lumo-styles": "^22.0.2",
+    "@vaadin/vaadin-material-styles": "^22.0.2",
+    "@vaadin/vaadin-overlay": "^22.0.2",
+    "@vaadin/vaadin-themable-mixin": "^22.0.2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/dialog": "22.0.0-beta2",
-    "@vaadin/polymer-legacy-adapter": "22.0.0-beta2",
-    "@vaadin/testing-helpers": "^0.3.0",
-    "@vaadin/text-field": "22.0.0-beta2",
+    "@vaadin/dialog": "^22.0.2",
+    "@vaadin/polymer-legacy-adapter": "^22.0.2",
+    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/text-field": "^22.0.2",
     "lit": "^2.0.0",
     "sinon": "^9.2.0"
   },
-  "gitHead": "f13833683e6667f6ca6678452db14aa6b7eac4a4"
+  "gitHead": "df21370c4a655a38eac11f79686021ab3b0887ad"
 }

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

@@ -10,15 +10,6 @@ import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-res
 import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-const TOUCH_DEVICE = (() => {
-  try {
-    document.createEvent('TouchEvent');
-    return true;
-  } catch (e) {
-    return false;
-  }
-})();
-
 /**
  * Element for internal use only.
  *
@@ -47,13 +38,9 @@ export class ComboBoxDropdown extends mixinBehaviors(IronResizableBehavior, Poly
   static get properties() {
     return {
       /**
-       * True if the device supports touch events.
+       * True if the combo-box has been activate by the user.
+       * The actual opened state depends on whether the dropdown has items.
        */
-      touchDevice: {
-        type: Boolean,
-        value: TOUCH_DEVICE
-      },
-
       opened: Boolean,
 
       /**

package/src/vaadin-combo-box-light.d.ts

@@ -3,6 +3,9 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ComboBoxDataProviderMixinClass } from './vaadin-combo-box-data-provider-mixin.js';
 import { ComboBoxMixinClass } from './vaadin-combo-box-mixin.js';
@@ -127,6 +130,9 @@ declare class ComboBoxLight<TItem = ComboBoxDefaultItem> extends HTMLElement {
 interface ComboBoxLight<TItem = ComboBoxDefaultItem>
   extends ComboBoxDataProviderMixinClass<TItem>,
     ComboBoxMixinClass<TItem>,
+    KeyboardMixinClass,
+    InputMixinClass,
+    DisabledMixinClass,
     ThemableMixinClass {}
 
 declare global {

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

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
 import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
@@ -360,7 +361,7 @@ export const ComboBoxMixin = (subclass) =>
         this._openedWithFocusRing = this.hasAttribute('focus-ring');
         // For touch devices, we don't want to popup virtual keyboard
         // unless input element is explicitly focused by the user.
-        if (!this.hasAttribute('focused') && !this.$.dropdown.touchDevice) {
+        if (!this.hasAttribute('focused') && !isTouch) {
           this.focus();
         }
       } else {
@@ -569,11 +570,14 @@ export const ComboBoxMixin = (subclass) =>
     _onEscape(e) {
       if (this.autoOpenDisabled) {
         // Auto-open is disabled
-        if (this.value !== this._inputElementValue) {
+        if (this.opened || (this.value !== this._inputElementValue && this._inputElementValue.length > 0)) {
+          // The overlay is open or
           // The input value has changed but the change hasn't been committed, so cancel it.
+          e.stopPropagation();
           this._focusedIndex = -1;
           this.cancel();
-        } else if (this.clearButtonVisible && !this.opened) {
+        } else if (this.clearButtonVisible && !this.opened && !!this.value) {
+          e.stopPropagation();
           // The clear button is visible and the overlay is closed, so clear the value.
           this._clear();
         }
@@ -591,7 +595,8 @@ export const ComboBoxMixin = (subclass) =>
             // No item is focused, cancel the change and close the overlay
             this.cancel();
           }
-        } else if (this.clearButtonVisible) {
+        } else if (this.clearButtonVisible && !!this.value) {
+          e.stopPropagation();
           // The clear button is visible and the overlay is closed, so clear the value.
           this._clear();
         }
@@ -605,7 +610,7 @@ export const ComboBoxMixin = (subclass) =>
         toggleElement.addEventListener('mousedown', (e) => e.preventDefault());
         // Unfocus previously focused element if focus is not inside combo box (on touch devices)
         toggleElement.addEventListener('click', () => {
-          if (this.$.dropdown.touchDevice && !this.hasAttribute('focused')) {
+          if (isTouch && !this.hasAttribute('focused')) {
             document.activeElement.blur();
           }
         });

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

@@ -3,9 +3,20 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+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';
+import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
+import { DelegateStateMixinClass } from '@vaadin/field-base/src/delegate-state-mixin.js';
+import { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
+import { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
 import { InputControlMixinClass } from '@vaadin/field-base/src/input-control-mixin.js';
+import { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
+import { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
 import { PatternMixinClass } from '@vaadin/field-base/src/pattern-mixin.js';
+import { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
 import { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ComboBoxDataProviderMixinClass } from './vaadin-combo-box-data-provider-mixin.js';
 import { ComboBoxMixinClass } from './vaadin-combo-box-mixin.js';
@@ -62,77 +73,60 @@ export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
 }
 
 /**
- * `<vaadin-combo-box>` is a combo box element combining a dropdown list with an
- * input field for filtering the list of items. If you want to replace the default
- * input field with a custom implementation, you should use the
- * [`<vaadin-combo-box-light>`](#/elements/vaadin-combo-box-light) element.
- *
- * Items in the dropdown list must be provided as a list of `String` values.
- * Defining the items is done using the `items` property, which can be assigned
- * with data-binding, using an attribute or directly with the JavaScript property.
+ * `<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options
+ * presented in a dropdown overlay. The options can be provided as a list of strings or objects
+ * by setting [`items`](#/elements/vaadin-combo-box#property-items) property on the element.
  *
  * ```html
- * <vaadin-combo-box
- *     label="Fruit"
- *     items="[[data]]">
- * </vaadin-combo-box>
+ * <vaadin-combo-box id="combo-box"></vaadin-combo-box>
  * ```
  *
  * ```js
- * combobox.items = ['apple', 'orange', 'banana'];
+ * document.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];
  * ```
  *
  * When the selected `value` is changed, a `value-changed` event is triggered.
  *
  * ### Item rendering
  *
- * `<vaadin-combo-box>` supports using custom renderer callback function for defining the
- * content of `<vaadin-combo-box-item>`.
+ * To customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use
+ * [`renderer`](#/elements/vaadin-combo-box#property-renderer) property which accepts a function.
+ * The renderer function is called with `root`, `comboBox`, and `model` as arguments.
  *
- * The renderer function provides `root`, `comboBox`, `model` arguments when applicable.
- * Generate DOM content by using `model` object properties if needed, append it to the `root`
- * element and control the state of the host element by accessing `comboBox`. Before generating new
- * content, users are able to check if there is already content in `root` for reusing it.
+ * Generate DOM content by using `model` object properties if needed, and append it to the `root`
+ * element. The `comboBox` reference is provided to access the combo-box element state. Do not
+ * set combo-box properties in a `renderer` function.
  *
- * ```html
- * <vaadin-combo-box id="combo-box"></vaadin-combo-box>
- * ```
  * ```js
  * const comboBox = document.querySelector('#combo-box');
  * comboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];
- * comboBox.renderer = function(root, comboBox, model) {
- *   root.innerHTML = model.index + ': ' +
- *                    model.item.label + ' ' +
- *                    '<b>' + model.item.value + '</b>';
+ * comboBox.renderer = (root, comboBox, model) => {
+ *   const item = model.item;
+ *   root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;
  * };
  * ```
  *
  * Renderer is called on the opening of the combo-box and each time the related model is updated.
- * DOM generated during the renderer call can be reused
- * in the next renderer call and will be provided with the `root` argument.
- * On first call it will be empty.
+ * Before creating new content, it is recommended to check if there is already an existing DOM
+ * element in `root` from a previous renderer call for reusing it. Even though combo-box uses
+ * infinite scrolling, reducing DOM operations might improve performance.
  *
  * The following properties are available in the `model` argument:
  *
- * Property name | Type | Description
- * --------------|------|------------
- * `index`| Number | Index of the item in the `items` array
- * `item` | String or Object | The item reference
- * `selected` | Boolean | True when item is selected
- * `focused` | Boolean | True when item is focused
+ * Property   | Type             | Description
+ * -----------|------------------|-------------
+ * `index`    | Number           | Index of the item in the `items` array
+ * `item`     | String or Object | The item reference
+ * `selected` | Boolean          | True when item is selected
+ * `focused`  | Boolean          | True when item is focused
  *
  * ### Lazy Loading with Function Data Provider
  *
- * In addition to assigning an array to the items property, you can alternatively
- * provide the `<vaadin-combo-box>` data through the
+ * In addition to assigning an array to the items property, you can alternatively use the
  * [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) function property.
  * The `<vaadin-combo-box>` calls this function lazily, only when it needs more data
  * to be displayed.
  *
- * See the [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) in
- * the API reference below for the detailed data provider arguments description,
- * and the “Lazy Loading“ example on “Basics” page in the demos.
- *
  * __Note that when using function data providers, the total number of items
  * needs to be set manually. The total number of items can be returned
  * in the second argument of the data provider callback:__
@@ -222,10 +216,21 @@ declare class ComboBox<TItem = ComboBoxDefaultItem> extends HTMLElement {
 interface ComboBox<TItem = ComboBoxDefaultItem>
   extends ComboBoxDataProviderMixinClass<TItem>,
     ComboBoxMixinClass<TItem>,
+    ValidateMixinClass,
     PatternMixinClass,
+    LabelMixinClass,
+    KeyboardMixinClass,
+    InputMixinClass,
     InputControlMixinClass,
+    InputConstraintsMixinClass,
+    FocusMixinClass,
+    FieldMixinClass,
+    DisabledMixinClass,
+    DelegateStateMixinClass,
+    DelegateFocusMixinClass,
     ThemableMixinClass,
-    ElementMixinClass {}
+    ElementMixinClass,
+    ControllerMixinClass {}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-combo-box.js

@@ -7,9 +7,9 @@ import '@vaadin/input-container/src/vaadin-input-container.js';
 import './vaadin-combo-box-dropdown.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { AriaLabelController } from '@vaadin/field-base/src/aria-label-controller.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
+import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -19,77 +19,60 @@ import { ComboBoxMixin } from './vaadin-combo-box-mixin.js';
 registerStyles('vaadin-combo-box', inputFieldShared, { moduleId: 'vaadin-combo-box-styles' });
 
 /**
- * `<vaadin-combo-box>` is a combo box element combining a dropdown list with an
- * input field for filtering the list of items. If you want to replace the default
- * input field with a custom implementation, you should use the
- * [`<vaadin-combo-box-light>`](#/elements/vaadin-combo-box-light) element.
- *
- * Items in the dropdown list must be provided as a list of `String` values.
- * Defining the items is done using the `items` property, which can be assigned
- * with data-binding, using an attribute or directly with the JavaScript property.
+ * `<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options
+ * presented in a dropdown overlay. The options can be provided as a list of strings or objects
+ * by setting [`items`](#/elements/vaadin-combo-box#property-items) property on the element.
  *
  * ```html
- * <vaadin-combo-box
- *     label="Fruit"
- *     items="[[data]]">
- * </vaadin-combo-box>
+ * <vaadin-combo-box id="combo-box"></vaadin-combo-box>
  * ```
  *
  * ```js
- * combobox.items = ['apple', 'orange', 'banana'];
+ * document.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];
  * ```
  *
  * When the selected `value` is changed, a `value-changed` event is triggered.
  *
  * ### Item rendering
  *
- * `<vaadin-combo-box>` supports using custom renderer callback function for defining the
- * content of `<vaadin-combo-box-item>`.
+ * To customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use
+ * [`renderer`](#/elements/vaadin-combo-box#property-renderer) property which accepts a function.
+ * The renderer function is called with `root`, `comboBox`, and `model` as arguments.
  *
- * The renderer function provides `root`, `comboBox`, `model` arguments when applicable.
- * Generate DOM content by using `model` object properties if needed, append it to the `root`
- * element and control the state of the host element by accessing `comboBox`. Before generating new
- * content, users are able to check if there is already content in `root` for reusing it.
+ * Generate DOM content by using `model` object properties if needed, and append it to the `root`
+ * element. The `comboBox` reference is provided to access the combo-box element state. Do not
+ * set combo-box properties in a `renderer` function.
  *
- * ```html
- * <vaadin-combo-box id="combo-box"></vaadin-combo-box>
- * ```
  * ```js
  * const comboBox = document.querySelector('#combo-box');
  * comboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];
- * comboBox.renderer = function(root, comboBox, model) {
- *   root.innerHTML = model.index + ': ' +
- *                    model.item.label + ' ' +
- *                    '<b>' + model.item.value + '</b>';
+ * comboBox.renderer = (root, comboBox, model) => {
+ *   const item = model.item;
+ *   root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;
  * };
  * ```
  *
  * Renderer is called on the opening of the combo-box and each time the related model is updated.
- * DOM generated during the renderer call can be reused
- * in the next renderer call and will be provided with the `root` argument.
- * On first call it will be empty.
+ * Before creating new content, it is recommended to check if there is already an existing DOM
+ * element in `root` from a previous renderer call for reusing it. Even though combo-box uses
+ * infinite scrolling, reducing DOM operations might improve performance.
  *
  * The following properties are available in the `model` argument:
  *
- * Property name | Type | Description
- * --------------|------|------------
- * `index`| Number | Index of the item in the `items` array
- * `item` | String or Object | The item reference
- * `selected` | Boolean | True when item is selected
- * `focused` | Boolean | True when item is focused
+ * Property   | Type             | Description
+ * -----------|------------------|-------------
+ * `index`    | Number           | Index of the item in the `items` array
+ * `item`     | String or Object | The item reference
+ * `selected` | Boolean          | True when item is selected
+ * `focused`  | Boolean          | True when item is focused
  *
  * ### Lazy Loading with Function Data Provider
  *
- * In addition to assigning an array to the items property, you can alternatively
- * provide the `<vaadin-combo-box>` data through the
+ * In addition to assigning an array to the items property, you can alternatively use the
  * [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) function property.
  * The `<vaadin-combo-box>` calls this function lazily, only when it needs more data
  * to be displayed.
  *
- * See the [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) in
- * the API reference below for the detailed data provider arguments description,
- * and the “Lazy Loading“ example on “Basics” page in the demos.
- *
  * __Note that when using function data providers, the total number of items
  * needs to be set manually. The total number of items can be returned
  * in the second argument of the data provider callback:__
@@ -259,7 +242,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
         this.ariaTarget = input;
       })
     );
-    this.addController(new AriaLabelController(this, this.inputElement, this._labelNode));
+    this.addController(new LabelledInputController(this.inputElement, this._labelNode));
     this._positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
     this._toggleElement = this.$.toggleButton;
   }