@vaadin/combo-box 24.2.0-alpha4 → 24.2.0-dev.385a0a5b2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/combo-box",
-  "version": "24.2.0-alpha4",
+  "version": "24.2.0-dev.385a0a5b2",
   "publishConfig": {
     "access": "public"
   },
@@ -38,21 +38,21 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-alpha4",
-    "@vaadin/component-base": "24.2.0-alpha4",
-    "@vaadin/field-base": "24.2.0-alpha4",
-    "@vaadin/input-container": "24.2.0-alpha4",
-    "@vaadin/item": "24.2.0-alpha4",
-    "@vaadin/lit-renderer": "24.2.0-alpha4",
-    "@vaadin/overlay": "24.2.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha4",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha4"
+    "@vaadin/a11y-base": "24.2.0-dev.385a0a5b2",
+    "@vaadin/component-base": "24.2.0-dev.385a0a5b2",
+    "@vaadin/field-base": "24.2.0-dev.385a0a5b2",
+    "@vaadin/input-container": "24.2.0-dev.385a0a5b2",
+    "@vaadin/item": "24.2.0-dev.385a0a5b2",
+    "@vaadin/lit-renderer": "24.2.0-dev.385a0a5b2",
+    "@vaadin/overlay": "24.2.0-dev.385a0a5b2",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-dev.385a0a5b2",
+    "@vaadin/vaadin-material-styles": "24.2.0-dev.385a0a5b2",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-dev.385a0a5b2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.2",
-    "@vaadin/text-field": "24.2.0-alpha4",
+    "@vaadin/testing-helpers": "^0.4.3",
+    "@vaadin/text-field": "24.2.0-dev.385a0a5b2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
@@ -60,5 +60,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "aaf7c5ebfea62628210eead4229be1718ac6b129"
+  "gitHead": "9d84e4049890430a33e91ff64a6e751a1ba9b9d9"
 }

package/src/lit/renderer-directives.d.ts

@@ -3,8 +3,8 @@
  * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import type { TemplateResult } from 'lit';
 import type { DirectiveResult } from 'lit/directive.js';
+import type { LitRendererResult } from '@vaadin/lit-renderer';
 import { LitRendererDirective } from '@vaadin/lit-renderer';
 import type { ComboBox, ComboBoxItemModel } from '../vaadin-combo-box.js';
 
@@ -12,7 +12,7 @@ export type ComboBoxLitRenderer<TItem> = (
   item: TItem,
   model: ComboBoxItemModel<TItem>,
   comboBox: ComboBox<TItem>,
-) => TemplateResult;
+) => LitRendererResult;
 
 export class ComboBoxRendererDirective<TItem> extends LitRendererDirective<ComboBox, ComboBoxLitRenderer<TItem>> {
   /**

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
@@ -152,6 +153,7 @@ interface ComboBoxLight<TItem = ComboBoxDefaultItem>
     InputMixinClass,
     DisabledMixinClass,
     ThemableMixinClass,
+    FocusMixinClass,
     ThemePropertyMixinClass,
     ValidateMixinClass {}
 

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

@@ -180,7 +180,7 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ValidateMixi
    * @return {boolean}
    */
   checkValidity() {
-    if (this.inputElement.validate) {
+    if (this.inputElement && this.inputElement.validate) {
       return this.inputElement.validate();
     }
     return super.checkValidity();
@@ -199,16 +199,16 @@ class ComboBoxLight extends ComboBoxDataProviderMixin(ComboBoxMixin(ValidateMixi
    * @protected
    * @override
    */
-  _onFocusout(event) {
+  _shouldRemoveFocus(event) {
     const isBlurringControlButtons = event.target === this._toggleElement || event.target === this.clearElement;
     const isFocusingInputElement = event.relatedTarget && event.relatedTarget === this._nativeInput;
 
     // prevent closing the overlay when moving focus from clear or toggle buttons to the internal input
     if (isBlurringControlButtons && isFocusingInputElement) {
-      return;
+      return false;
     }
 
-    super._onFocusout(event);
+    return super._shouldRemoveFocus(event);
   }
 }
 

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

@@ -5,9 +5,11 @@
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
+import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
 import type { ComboBox } from './vaadin-combo-box.js';
 import type { ComboBoxDefaultItem, ComboBoxItemModel, ComboBoxItemRenderer } from './vaadin-combo-box-item-mixin.js';
 
@@ -19,9 +21,11 @@ export declare function ComboBoxMixin<TItem, T extends Constructor<HTMLElement>>
   base: T,
 ): Constructor<ComboBoxMixinClass<TItem>> &
   Constructor<DisabledMixinClass> &
+  Constructor<FocusMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
   Constructor<OverlayClassMixinClass> &
+  Constructor<ValidateMixinClass> &
   T;
 
 export declare class ComboBoxMixinClass<TItem> {

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { isElementFocused } from '@vaadin/a11y-base/src/focus-utils.js';
 import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
@@ -11,6 +12,7 @@ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
+import { ValidateMixin } from '@vaadin/field-base/src/validate-mixin.js';
 import { VirtualKeyboardController } from '@vaadin/field-base/src/virtual-keyboard-controller.js';
 import { ComboBoxPlaceholder } from './vaadin-combo-box-placeholder.js';
 
@@ -45,15 +47,17 @@ function findItemIndex(items, callback) {
 /**
  * @polymerMixin
  * @mixes ControllerMixin
+ * @mixes ValidateMixin
  * @mixes DisabledMixin
  * @mixes InputMixin
  * @mixes KeyboardMixin
+ * @mixes FocusMixin
  * @mixes OverlayClassMixin
  * @param {function(new:HTMLElement)} subclass
  */
 export const ComboBoxMixin = (subclass) =>
   class ComboBoxMixinClass extends OverlayClassMixin(
-    ControllerMixin(KeyboardMixin(InputMixin(DisabledMixin(subclass)))),
+    ControllerMixin(ValidateMixin(FocusMixin(KeyboardMixin(InputMixin(DisabledMixin(subclass)))))),
   ) {
     static get properties() {
       return {
@@ -253,7 +257,6 @@ export const ComboBoxMixin = (subclass) =>
 
     constructor() {
       super();
-      this._boundOnFocusout = this._onFocusout.bind(this);
       this._boundOverlaySelectedItemChanged = this._overlaySelectedItemChanged.bind(this);
       this._boundOnClearButtonMouseDown = this.__onClearButtonMouseDown.bind(this);
       this._boundOnClick = this._onClick.bind(this);
@@ -320,8 +323,6 @@ export const ComboBoxMixin = (subclass) =>
       this._initOverlay();
       this._initScroller();
 
-      this.addEventListener('focusout', this._boundOnFocusout);
-
       this._lastCommittedValue = this.value;
 
       this.addEventListener('click', this._boundOnClick);
@@ -1085,6 +1086,12 @@ export const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _detectAndDispatchChange() {
+      // Do not validate when focusout is caused by document
+      // losing focus, which happens on browser tab switch.
+      if (document.hasFocus()) {
+        this.validate();
+      }
+
       if (this.value !== this._lastCommittedValue) {
         this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
         this._lastCommittedValue = this.value;
@@ -1227,20 +1234,18 @@ 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;
-      }
+    /**
+     * Override method inherited from `FocusMixin`
+     * to close the overlay on blur and commit the value.
+     *
+     * @param {boolean} focused
+     * @protected
+     * @override
+     */
+    _setFocused(focused) {
+      super._setFocused(focused);
 
-      // Fixes the problem with `focusout` happening when clicking on the scroll bar on Edge
-      if (event.relatedTarget === this._overlayElement) {
-        event.composedPath()[0].focus();
-        return;
-      }
-      if (!this.readonly && !this._closeOnBlurIsPrevented) {
+      if (!focused && !this.readonly && !this._closeOnBlurIsPrevented) {
         // User's logic in `custom-value-set` event listener might cause input to blur,
         // which will result in attempting to commit the same custom value once again.
         if (!this.opened && this.allowCustomValue && this._inputElementValue === this._lastCustomValue) {
@@ -1252,6 +1257,32 @@ export const ComboBoxMixin = (subclass) =>
       }
     }
 
+    /**
+     * Override method inherited from `FocusMixin` to not remove focused
+     * state when focus moves to the overlay.
+     *
+     * @param {FocusEvent} event
+     * @return {boolean}
+     * @protected
+     * @override
+     */
+    _shouldRemoveFocus(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 false;
+      }
+
+      // Do not blur when focus moves to the overlay
+      // Also, fixes the problem with `focusout` happening when clicking on the scroll bar on Edge
+      if (event.relatedTarget === this._overlayElement) {
+        event.composedPath()[0].focus();
+        return false;
+      }
+
+      return true;
+    }
+
     /** @private */
     _onTouchend(event) {
       if (!this.clearElement || event.composedPath()[0] !== this.clearElement) {

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

@@ -3,13 +3,15 @@
  * Copyright (c) 2015 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ComboBoxOverlayMixin } from './vaadin-combo-box-overlay-mixin.js';
 
 /**
  * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
  */
-declare class ComboBoxOverlay extends ComboBoxOverlayMixin(Overlay) {}
+declare class ComboBoxOverlay extends ComboBoxOverlayMixin(OverlayMixin(DirMixin(ThemableMixin(HTMLElement)))) {}
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -3,54 +3,52 @@
  * Copyright (c) 2015 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ComboBoxOverlayMixin } from './vaadin-combo-box-overlay-mixin.js';
 
-registerStyles(
-  'vaadin-combo-box-overlay',
-  css`
-    #overlay {
-      width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
-    }
+const comboBoxOverlayStyles = css`
+  #overlay {
+    width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
+  }
 
-    [part='content'] {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-  `,
-  { moduleId: 'vaadin-combo-box-overlay-styles' },
-);
+  [part='content'] {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+`;
 
-let memoizedTemplate;
+registerStyles('vaadin-combo-box-overlay', [overlayStyles, comboBoxOverlayStyles], {
+  moduleId: 'vaadin-combo-box-overlay-styles',
+});
 
 /**
  * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
  *
- * @extends Overlay
+ * @extends HTMLElement
  * @mixes ComboBoxOverlayMixin
+ * @mixes DirMixin
+ * @mixes OverlayMixin
+ * @mixes ThemableMixin
  * @private
  */
-export class ComboBoxOverlay extends ComboBoxOverlayMixin(Overlay) {
+export class ComboBoxOverlay extends ComboBoxOverlayMixin(OverlayMixin(DirMixin(ThemableMixin(PolymerElement)))) {
   static get is() {
     return 'vaadin-combo-box-overlay';
   }
 
   static get template() {
-    if (!memoizedTemplate) {
-      memoizedTemplate = super.template.cloneNode(true);
-
-      const overlay = memoizedTemplate.content.querySelector('[part~="overlay"]');
-      overlay.removeAttribute('tabindex');
-
-      const loader = document.createElement('div');
-      loader.setAttribute('part', 'loader');
-
-      overlay.insertBefore(loader, overlay.firstElementChild);
-    }
-
-    return memoizedTemplate;
+    return html`
+      <div id="backdrop" part="backdrop" hidden></div>
+      <div part="overlay" id="overlay">
+        <div part="loader"></div>
+        <div part="content" id="content"><slot></slot></div>
+      </div>
+    `;
   }
 }
 

package/src/vaadin-combo-box.js

@@ -254,40 +254,6 @@ class ComboBox extends ComboBoxDataProviderMixin(
     this._toggleElement = this.$.toggleButton;
   }
 
-  /**
-   * Override method inherited from `FocusMixin` to validate on blur.
-   * @param {boolean} focused
-   * @protected
-   * @override
-   */
-  _setFocused(focused) {
-    super._setFocused(focused);
-
-    // Do not validate when focusout is caused by document
-    // losing focus, which happens on browser tab switch.
-    if (!focused && document.hasFocus()) {
-      this.validate();
-    }
-  }
-
-  /**
-   * Override method inherited from `FocusMixin` to not remove focused
-   * state when focus moves to the overlay.
-   * @param {FocusEvent} event
-   * @return {boolean}
-   * @protected
-   * @override
-   */
-  _shouldRemoveFocus(event) {
-    // Do not blur when focus moves to the overlay
-    if (event.relatedTarget === this._overlayElement) {
-      event.composedPath()[0].focus();
-      return false;
-    }
-
-    return true;
-  }
-
   /**
    * Override the method from `InputControlMixin`
    * to stop event propagation to prevent `ComboBoxMixin`

package/theme/lumo/vaadin-combo-box-overlay-styles.js

@@ -1,7 +1,6 @@
 import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/overlay/theme/lumo/vaadin-overlay.js';
 import { loader } from '@vaadin/vaadin-lumo-styles/mixins/loader.js';
 import { menuOverlayCore } from '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
 import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';

package/theme/material/vaadin-combo-box-overlay-styles.js

@@ -1,5 +1,4 @@
 import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/overlay/theme/material/vaadin-overlay.js';
 import { loader } from '@vaadin/vaadin-material-styles/mixins/loader.js';
 import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';