@vaadin/combo-box 23.2.0-alpha3 → 23.2.0-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "23.2.0-alpha3",
+  "version": "23.2.0-alpha6",
   "publishConfig": {
     "access": "public"
   },
@@ -24,7 +24,9 @@
     "src",
     "theme",
     "vaadin-*.d.ts",
-    "vaadin-*.js"
+    "vaadin-*.js",
+    "web-types.json",
+    "web-types.lit.json"
   ],
   "keywords": [
     "Vaadin",
@@ -36,23 +38,27 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.2.0-alpha3",
-    "@vaadin/field-base": "23.2.0-alpha3",
-    "@vaadin/input-container": "23.2.0-alpha3",
-    "@vaadin/item": "23.2.0-alpha3",
-    "@vaadin/lit-renderer": "23.2.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha3",
-    "@vaadin/vaadin-material-styles": "23.2.0-alpha3",
-    "@vaadin/vaadin-overlay": "23.2.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha3"
+    "@vaadin/component-base": "23.2.0-alpha6",
+    "@vaadin/field-base": "23.2.0-alpha6",
+    "@vaadin/input-container": "23.2.0-alpha6",
+    "@vaadin/item": "23.2.0-alpha6",
+    "@vaadin/lit-renderer": "23.2.0-alpha6",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha6",
+    "@vaadin/vaadin-material-styles": "23.2.0-alpha6",
+    "@vaadin/vaadin-overlay": "23.2.0-alpha6",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha6"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "23.2.0-alpha3",
+    "@vaadin/polymer-legacy-adapter": "23.2.0-alpha6",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "23.2.0-alpha3",
+    "@vaadin/text-field": "23.2.0-alpha6",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "06e5875be93ca50da2846dafc65a8531010c0576"
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "gitHead": "61f1fb56953434e97d34a8819640064301dd3d8a"
 }

package/src/vaadin-combo-box-data-provider-mixin.d.ts

@@ -20,7 +20,7 @@ export type ComboBoxDataProvider<TItem> = (
 
 export declare function ComboBoxDataProviderMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T & Constructor<ComboBoxDataProviderMixinClass<TItem>>;
+): Constructor<ComboBoxDataProviderMixinClass<TItem>> & T;
 
 export declare class ComboBoxDataProviderMixinClass<TItem> {
   /**

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

@@ -186,7 +186,7 @@ export const ComboBoxDataProviderMixin = (superClass) =>
         filteredItems.splice(params.page * params.pageSize, items.length, ...items);
         this.filteredItems = filteredItems;
 
-        if (!this.opened && !this.hasAttribute('focused')) {
+        if (!this.opened && !this._isInputFocused()) {
           this._commitValue();
         }
 

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

@@ -8,6 +8,7 @@ import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mix
 import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
 import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import type { ComboBoxDataProviderMixinClass } from './vaadin-combo-box-data-provider-mixin.js';
 import type { ComboBoxDefaultItem, ComboBoxMixinClass } from './vaadin-combo-box-mixin.js';
 export {
@@ -134,13 +135,13 @@ declare class ComboBoxLight<TItem = ComboBoxDefaultItem> extends HTMLElement {
   addEventListener<K extends keyof ComboBoxLightEventMap<TItem>>(
     type: K,
     listener: (this: ComboBoxLight<TItem>, ev: ComboBoxLightEventMap<TItem>[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof ComboBoxLightEventMap<TItem>>(
     type: K,
     listener: (this: ComboBoxLight<TItem>, ev: ComboBoxLightEventMap<TItem>[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 
@@ -151,6 +152,7 @@ interface ComboBoxLight<TItem = ComboBoxDefaultItem>
     InputMixinClass,
     DisabledMixinClass,
     ThemableMixinClass,
+    ThemePropertyMixinClass,
     ValidateMixinClass {}
 
 declare global {

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

@@ -7,6 +7,7 @@ import './vaadin-combo-box-item.js';
 import './vaadin-combo-box-overlay.js';
 import './vaadin-combo-box-scroller.js';
 import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
+import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -82,7 +83,6 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ValidateMixi
 
       <vaadin-combo-box-overlay
         id="overlay"
-        hidden$="[[_isOverlayHidden(filteredItems, loading)]]"
         opened="[[_overlayOpened]]"
         loading$="[[loading]]"
         theme$="[[_theme]]"
@@ -120,14 +120,14 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ValidateMixi
   /** @protected */
   ready() {
     super.ready();
+
     this._toggleElement = this.querySelector('.toggle-button');
-  }
 
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-    this._setInputElement(this.querySelector('vaadin-text-field,.input'));
-    this._revertInputValue();
+    // Wait until the slotted input DOM is ready
+    afterNextRender(this, () => {
+      this._setInputElement(this.querySelector('vaadin-text-field,.input'));
+      this._revertInputValue();
+    });
   }
 
   /**
@@ -149,6 +149,38 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ValidateMixi
     return dashToCamelCase(this.attrForValue);
   }
 
+  /**
+   * @protected
+   * @override
+   * @return {HTMLInputElement | undefined}
+   */
+  get _nativeInput() {
+    const input = this.inputElement;
+
+    if (input) {
+      // Support `<input class="input">`
+      if (input instanceof HTMLInputElement) {
+        return input;
+      }
+
+      // Support `<input>` in light DOM (e.g. `vaadin-text-field`)
+      const slottedInput = input.querySelector('input');
+      if (slottedInput) {
+        return slottedInput;
+      }
+
+      if (input.shadowRoot) {
+        // Support `<input>` in Shadow DOM (e.g. `mwc-textfield`)
+        const shadowInput = input.shadowRoot.querySelector('input');
+        if (shadowInput) {
+          return shadowInput;
+        }
+      }
+    }
+
+    return undefined;
+  }
+
   /** @protected */
   _isClearButton(event) {
     return (

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

@@ -24,11 +24,11 @@ export type ComboBoxRenderer<TItem> = (
 
 export declare function ComboBoxMixin<TItem, T extends Constructor<HTMLElement>>(
   base: T,
-): T &
-  Constructor<ComboBoxMixinClass<TItem>> &
+): Constructor<ComboBoxMixinClass<TItem>> &
   Constructor<DisabledMixinClass> &
   Constructor<InputMixinClass> &
-  Constructor<KeyboardMixinClass>;
+  Constructor<KeyboardMixinClass> &
+  T;
 
 export declare class ComboBoxMixinClass<TItem> {
   /**
@@ -165,16 +165,5 @@ export declare class ComboBoxMixinClass<TItem> {
    */
   close(): void;
 
-  /**
-   * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
-   */
-  validate(): boolean;
-
-  /**
-   * Returns true if the current input value satisfies all constraints (if any).
-   * You can override this method for custom validations.
-   */
-  checkValidity(): boolean;
-
   protected _revertInputValue(): void;
 }

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

@@ -6,6 +6,7 @@
 import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
+import { isElementFocused } from '@vaadin/component-base/src/focus-utils.js';
 import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
@@ -279,14 +280,26 @@ export const ComboBoxMixin = (subclass) =>
       }
     }
 
+    /**
+     * Get a reference to the native `<input>` element.
+     * Override to provide a custom input.
+     * @protected
+     * @return {HTMLInputElement | undefined}
+     */
+    get _nativeInput() {
+      return this.inputElement;
+    }
+
     /**
      * Override method inherited from `InputMixin`
      * to customize the input element.
      * @protected
      * @override
      */
-    _inputElementChanged(input) {
-      super._inputElementChanged(input);
+    _inputElementChanged(inputElement) {
+      super._inputElementChanged(inputElement);
+
+      const input = this._nativeInput;
 
       if (input) {
         input.autocomplete = 'off';
@@ -413,11 +426,6 @@ export const ComboBoxMixin = (subclass) =>
       // Prevent blurring the input when clicking inside the overlay
       overlay.addEventListener('mousedown', (e) => e.preventDefault());
 
-      // Preventing the default modal behavior of the overlay on input click
-      overlay.addEventListener('vaadin-overlay-outside-click', (e) => {
-        e.preventDefault();
-      });
-
       // Manual two-way binding for the overlay "opened" property
       overlay.addEventListener('opened-changed', (e) => {
         this._overlayOpened = e.detail.value;
@@ -442,9 +450,7 @@ export const ComboBoxMixin = (subclass) =>
       };
 
       // Ensure the scroller is rendered
-      if (!this.opened) {
-        overlay.requestContentUpdate();
-      }
+      overlay.requestContentUpdate();
 
       const scroller = overlay.querySelector(scrollerTag);
 
@@ -478,11 +484,6 @@ export const ComboBoxMixin = (subclass) =>
       }
     }
 
-    /** @protected */
-    _isOverlayHidden(items, loading) {
-      return !loading && !(items && items.length);
-    }
-
     /** @private */
     _openedOrItemsChanged(opened, items, loading) {
       // Close the overlay if there are no items to display.
@@ -511,9 +512,14 @@ export const ComboBoxMixin = (subclass) =>
       this._updateActiveDescendant(index);
     }
 
+    /** @protected */
+    _isInputFocused() {
+      return this.inputElement && isElementFocused(this.inputElement);
+    }
+
     /** @private */
     _updateActiveDescendant(index) {
-      const input = this.inputElement;
+      const input = this._nativeInput;
       if (!input) {
         return;
       }
@@ -537,19 +543,19 @@ 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') && !isTouch) {
+        if (!this._isInputFocused() && !isTouch) {
           this.focus();
         }
 
         this.$.overlay.restoreFocusOnClose = true;
       } else {
         this._onClosed();
-        if (this._openedWithFocusRing && this.hasAttribute('focused')) {
+        if (this._openedWithFocusRing && this._isInputFocused()) {
           this.setAttribute('focus-ring', '');
         }
       }
 
-      const input = this.inputElement;
+      const input = this._nativeInput;
       if (input) {
         input.setAttribute('aria-expanded', !!opened);
 
@@ -618,8 +624,6 @@ export const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _onClick(e) {
-      this._closeOnBlurIsPrevented = true;
-
       const path = e.composedPath();
 
       if (this._isClearButton(e)) {
@@ -629,8 +633,6 @@ export const ComboBoxMixin = (subclass) =>
       } else {
         this._onHostClick(e);
       }
-
-      this._closeOnBlurIsPrevented = false;
     }
 
     /**
@@ -646,16 +648,12 @@ export const ComboBoxMixin = (subclass) =>
       if (e.key === 'Tab') {
         this.$.overlay.restoreFocusOnClose = false;
       } else if (e.key === 'ArrowDown') {
-        this._closeOnBlurIsPrevented = true;
         this._onArrowDown();
-        this._closeOnBlurIsPrevented = false;
 
         // Prevent caret from moving
         e.preventDefault();
       } else if (e.key === 'ArrowUp') {
-        this._closeOnBlurIsPrevented = true;
         this._onArrowUp();
-        this._closeOnBlurIsPrevented = false;
 
         // Prevent caret from moving
         e.preventDefault();
@@ -726,8 +724,7 @@ export const ComboBoxMixin = (subclass) =>
       // and there's no need to modify the selection range if the input isn't focused anyway.
       // This affects Safari. When the overlay is open, and then hitting tab, browser should focus
       // the next focusable element instead of the combo-box itself.
-      // Checking the focused property here is enough instead of checking the activeElement.
-      if (this.hasAttribute('focused')) {
+      if (this._isInputFocused() && this.inputElement.setSelectionRange) {
         this.inputElement.setSelectionRange(start, end);
       }
     }
@@ -837,7 +834,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 (isTouch && !this.hasAttribute('focused')) {
+          if (isTouch && !this._isInputFocused()) {
             document.activeElement.blur();
           }
         });
@@ -1256,9 +1253,6 @@ export const ComboBoxMixin = (subclass) =>
       if (this.opened) {
         this._focusedIndex = this.filteredItems.indexOf(e.detail.item);
         this.close();
-      } else if (this.selectedItem !== e.detail.item) {
-        this.selectedItem = e.detail.item;
-        this._detectAndDispatchChange();
       }
     }
 
@@ -1270,6 +1264,12 @@ export const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _onFocusout(event) {
+      // VoiceOver on iOS fires `focusout` event when moving focus to the item in the dropdown.
+      // Do not focus the input in this case, because it would break announcement for the item.
+      if (event.relatedTarget && event.relatedTarget.localName === `${this._tagNamePrefix}-item`) {
+        return;
+      }
+
       // Fixes the problem with `focusout` happening when clicking on the scroll bar on Edge
       if (event.relatedTarget === this.$.overlay) {
         event.composedPath()[0].focus();

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

@@ -18,6 +18,7 @@ import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
 import type { PatternMixinClass } from '@vaadin/field-base/src/pattern-mixin.js';
 import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
 import type { ThemableMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import type { ComboBoxDataProviderMixinClass } from './vaadin-combo-box-data-provider-mixin.js';
 import type { ComboBoxMixinClass } from './vaadin-combo-box-mixin.js';
 import type { ComboBoxDefaultItem } from './vaadin-combo-box-mixin.js';
@@ -221,13 +222,13 @@ declare class ComboBox<TItem = ComboBoxDefaultItem> extends HTMLElement {
   addEventListener<K extends keyof ComboBoxEventMap<TItem>>(
     type: K,
     listener: (this: ComboBox<TItem>, ev: ComboBoxEventMap<TItem>[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof ComboBoxEventMap<TItem>>(
     type: K,
     listener: (this: ComboBox<TItem>, ev: ComboBoxEventMap<TItem>[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 
@@ -247,6 +248,7 @@ interface ComboBox<TItem = ComboBoxDefaultItem>
     DelegateStateMixinClass,
     DelegateFocusMixinClass,
     ThemableMixinClass,
+    ThemePropertyMixinClass,
     ElementMixinClass,
     ControllerMixinClass {}
 

package/src/vaadin-combo-box.js

@@ -202,7 +202,6 @@ class ComboBox extends ComboBoxDataProviderMixin(
 
       <vaadin-combo-box-overlay
         id="overlay"
-        hidden$="[[_isOverlayHidden(filteredItems, loading)]]"
         opened="[[_overlayOpened]]"
         loading$="[[loading]]"
         theme$="[[_theme]]"