@vaadin/combo-box 23.1.2 → 23.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "23.1.2",
+  "version": "23.1.5",
   "publishConfig": {
     "access": "public"
   },
@@ -36,23 +36,23 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^23.1.2",
-    "@vaadin/field-base": "^23.1.2",
-    "@vaadin/input-container": "^23.1.2",
-    "@vaadin/item": "^23.1.2",
-    "@vaadin/lit-renderer": "^23.1.2",
-    "@vaadin/vaadin-lumo-styles": "^23.1.2",
-    "@vaadin/vaadin-material-styles": "^23.1.2",
-    "@vaadin/vaadin-overlay": "^23.1.2",
-    "@vaadin/vaadin-themable-mixin": "^23.1.2"
+    "@vaadin/component-base": "^23.1.5",
+    "@vaadin/field-base": "^23.1.5",
+    "@vaadin/input-container": "^23.1.5",
+    "@vaadin/item": "^23.1.5",
+    "@vaadin/lit-renderer": "^23.1.5",
+    "@vaadin/vaadin-lumo-styles": "^23.1.5",
+    "@vaadin/vaadin-material-styles": "^23.1.5",
+    "@vaadin/vaadin-overlay": "^23.1.5",
+    "@vaadin/vaadin-themable-mixin": "^23.1.5"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "^23.1.2",
+    "@vaadin/polymer-legacy-adapter": "^23.1.5",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-field": "^23.1.2",
+    "@vaadin/text-field": "^23.1.5",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "6fb205c6e9a761feadfb779dd5d7af96d3102e56"
+  "gitHead": "326938919a54353231af25d341ba6076c249afee"
 }

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-light.d.ts

@@ -126,13 +126,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;
 }
 

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

@@ -5,6 +5,7 @@
  */
 import './vaadin-combo-box-dropdown.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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';
@@ -118,14 +119,14 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ThemableMixi
   /** @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();
+    });
   }
 
   /**
@@ -147,6 +148,38 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ThemableMixi
     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> {
   /**

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

@@ -238,14 +238,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';
@@ -346,7 +358,7 @@ export const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _updateActiveDescendant(index) {
-      const input = this.inputElement;
+      const input = this._nativeInput;
       if (!input) {
         return;
       }
@@ -382,7 +394,7 @@ export const ComboBoxMixin = (subclass) =>
         }
       }
 
-      const input = this.inputElement;
+      const input = this._nativeInput;
       if (input) {
         input.setAttribute('aria-expanded', !!opened);
 
@@ -1094,6 +1106,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 && this._getItemElements().includes(event.relatedTarget)) {
+        return;
+      }
+
       // Fixes the problem with `focusout` happening when clicking on the scroll bar on Edge
       if (event.relatedTarget === this.$.dropdown.$.overlay) {
         event.composedPath()[0].focus();

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

@@ -212,13 +212,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;
 }