@vaadin/combo-box 23.2.0-dev.8a7678b70 → 23.2.0-rc1

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';
@@ -236,7 +237,6 @@ export const ComboBoxMixin = (subclass) =>
 
     static get observers() {
       return [
-        '_filterChanged(filter, itemValuePath, itemLabelPath)',
         '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)',
         '_openedOrItemsChanged(opened, filteredItems, loading)',
         '_updateScroller(_scroller, filteredItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, theme)',
@@ -280,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';
@@ -382,6 +394,25 @@ export const ComboBoxMixin = (subclass) =>
       this.opened = false;
     }
 
+    /**
+     * Override Polymer lifecycle callback to handle `filter` property change after
+     * the observer for `opened` property is triggered. This is needed when opening
+     * combo-box on user input to ensure the focused index is set correctly.
+     *
+     * @param {!Object} currentProps Current accessor values
+     * @param {?Object} changedProps Properties changed since the last call
+     * @param {?Object} oldProps Previous values for each changed property
+     * @protected
+     * @override
+     */
+    _propertiesChanged(currentProps, changedProps, oldProps) {
+      super._propertiesChanged(currentProps, changedProps, oldProps);
+
+      if (changedProps.filter !== undefined) {
+        this._filterChanged(changedProps.filter);
+      }
+    }
+
     /** @private */
     _initOverlay() {
       const overlay = this.$.overlay;
@@ -395,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;
@@ -424,9 +450,7 @@ export const ComboBoxMixin = (subclass) =>
       };
 
       // Ensure the scroller is rendered
-      if (!this.opened) {
-        overlay.requestContentUpdate();
-      }
+      overlay.requestContentUpdate();
 
       const scroller = overlay.querySelector(scrollerTag);
 
@@ -460,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.
@@ -493,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;
       }
@@ -519,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);
 
@@ -600,8 +624,6 @@ export const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _onClick(e) {
-      this._closeOnBlurIsPrevented = true;
-
       const path = e.composedPath();
 
       if (this._isClearButton(e)) {
@@ -611,8 +633,6 @@ export const ComboBoxMixin = (subclass) =>
       } else {
         this._onHostClick(e);
       }
-
-      this._closeOnBlurIsPrevented = false;
     }
 
     /**
@@ -628,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();
@@ -708,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);
       }
     }
@@ -819,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();
           }
         });
@@ -926,9 +941,7 @@ export const ComboBoxMixin = (subclass) =>
 
       this._clearSelectionRange();
 
-      if (!this.dataProvider) {
-        this.filter = '';
-      }
+      this.filter = '';
     }
 
     /**
@@ -946,19 +959,27 @@ export const ComboBoxMixin = (subclass) =>
      * @override
      */
     _onInput(event) {
-      if (!this.opened && !this._isClearButton(event) && !this.autoOpenDisabled) {
-        this.open();
-      }
+      const filter = this._inputElementValue;
+
+      // When opening dropdown on user input, both `opened` and `filter` properties are set.
+      // Perform a batched property update instead of relying on sync property observers.
+      // This is necessary to avoid an extra data-provider request for loading first page.
+      const props = {};
 
-      const value = this._inputElementValue;
-      if (this.filter === value) {
+      if (this.filter === filter) {
         // Filter and input value might get out of sync, while keyboard navigating for example.
         // Afterwards, input value might be changed to the same value as used in filtering.
         // In situation like these, we need to make sure all the filter changes handlers are run.
-        this._filterChanged(this.filter, this.itemValuePath, this.itemLabelPath);
+        this._filterChanged(this.filter);
       } else {
-        this.filter = value;
+        props.filter = filter;
       }
+
+      if (!this.opened && !this._isClearButton(event) && !this.autoOpenDisabled) {
+        props.opened = true;
+      }
+
+      this.setProperties(props);
     }
 
     /**
@@ -981,11 +1002,7 @@ export const ComboBoxMixin = (subclass) =>
     }
 
     /** @private */
-    _filterChanged(filter, _itemValuePath, _itemLabelPath) {
-      if (filter === undefined) {
-        return;
-      }
-
+    _filterChanged(filter) {
       // Scroll to the top of the list whenever the filter changes.
       this._scrollIntoView(0);
 
@@ -1028,7 +1045,7 @@ export const ComboBoxMixin = (subclass) =>
             this.value = '';
           }
 
-          this._toggleHasValue(this.value !== '');
+          this._toggleHasValue(this._hasValue);
           this._inputElementValue = this.value;
         }
       } else {
@@ -1064,21 +1081,21 @@ export const ComboBoxMixin = (subclass) =>
       }
 
       if (isValidValue(value)) {
-        let item;
         if (this._getItemValue(this.selectedItem) !== value) {
           this._selectItemForValue(value);
-        } else {
-          item = this.selectedItem;
         }
 
-        if (!item && this.allowCustomValue) {
+        if (!this.selectedItem && this.allowCustomValue) {
           this._inputElementValue = value;
         }
 
-        this._toggleHasValue(this.value !== '');
+        this._toggleHasValue(this._hasValue);
       } else {
         this.selectedItem = null;
       }
+
+      this.filter = '';
+
       // In the next _detectAndDispatchChange() call, the change detection should pass
       this._lastCommittedValue = undefined;
     }
@@ -1236,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();
       }
     }
 
@@ -1250,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();
@@ -1277,35 +1297,12 @@ export const ComboBoxMixin = (subclass) =>
       this._clear();
     }
 
-    /**
-     * Returns true if `value` is valid, and sets the `invalid` flag appropriately.
-     *
-     * @return {boolean} True if the value is valid and sets the `invalid` flag appropriately
-     */
-    validate() {
-      return !(this.invalid = !this.checkValidity());
-    }
-
-    /**
-     * Returns true if the current input value satisfies all constraints (if any).
-     * You can override this method for custom validations.
-     *
-     * @return {boolean}
-     */
-    checkValidity() {
-      if (super.checkValidity) {
-        return super.checkValidity();
-      }
-
-      return !this.required || !!this.value;
-    }
-
     /**
      * Fired when the value changes.
      *
      * @event value-changed
      * @param {Object} detail
-     *  @param {String} detail.value the combobox value
+     * @param {String} detail.value the combobox value
      */
 
     /**
@@ -1313,7 +1310,7 @@ export const ComboBoxMixin = (subclass) =>
      *
      * @event selected-item-changed
      * @param {Object} detail
-     *  @param {Object|String} detail.value the selected item. Type is the same as the type of `items`.
+     * @param {Object|String} detail.value the selected item. Type is the same as the type of `items`.
      */
 
     /**

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

@@ -3,24 +3,25 @@
  * Copyright (c) 2015 - 2022 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';
-import { ComboBoxDefaultItem } from './vaadin-combo-box-mixin.js';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
+import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
+import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
+import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
+import type { DelegateFocusMixinClass } from '@vaadin/field-base/src/delegate-focus-mixin.js';
+import type { DelegateStateMixinClass } from '@vaadin/field-base/src/delegate-state-mixin.js';
+import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
+import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
+import type { InputControlMixinClass } from '@vaadin/field-base/src/input-control-mixin.js';
+import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
+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';
 export {
   ComboBoxDataProvider,
   ComboBoxDataProviderCallback,
@@ -65,6 +66,11 @@ export type ComboBoxFilterChangedEvent = CustomEvent<{ value: string }>;
  */
 export type ComboBoxSelectedItemChangedEvent<TItem> = CustomEvent<{ value: TItem | null | undefined }>;
 
+/**
+ * Fired whenever the field is validated.
+ */
+export type ComboBoxValidatedEvent = CustomEvent<{ valid: boolean }>;
+
 export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
   change: ComboBoxChangeEvent<TItem>;
 
@@ -79,6 +85,8 @@ export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
   'value-changed': ComboBoxValueChangedEvent;
 
   'selected-item-changed': ComboBoxSelectedItemChangedEvent<TItem>;
+
+  validated: ComboBoxValidatedEvent;
 }
 
 /**
@@ -165,6 +173,7 @@ export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
  * Custom property                         | Description                | Default
  * ----------------------------------------|----------------------------|---------
  * `--vaadin-field-default-width`          | Default width of the field | `12em`
+ * `--vaadin-combo-box-overlay-width`      | Width of the overlay       | `auto`
  * `--vaadin-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
  *
  * `<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
@@ -207,18 +216,19 @@ export interface ComboBoxEventMap<TItem> extends HTMLElementEventMap {
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} selected-item-changed - Fired when the `selectedItem` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
 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;
 }
 
@@ -238,6 +248,7 @@ interface ComboBox<TItem = ComboBoxDefaultItem>
     DelegateStateMixinClass,
     DelegateFocusMixinClass,
     ThemableMixinClass,
+    ThemePropertyMixinClass,
     ElementMixinClass,
     ControllerMixinClass {}
 

package/src/vaadin-combo-box.js

@@ -104,6 +104,7 @@ registerStyles('vaadin-combo-box', inputFieldShared, { moduleId: 'vaadin-combo-b
  * Custom property                         | Description                | Default
  * ----------------------------------------|----------------------------|---------
  * `--vaadin-field-default-width`          | Default width of the field | `12em`
+ * `--vaadin-combo-box-overlay-width`      | Width of the overlay       | `auto`
  * `--vaadin-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
  *
  * `<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
@@ -146,6 +147,7 @@ registerStyles('vaadin-combo-box', inputFieldShared, { moduleId: 'vaadin-combo-b
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} selected-item-changed - Fired when the `selectedItem` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
  * @extends HTMLElement
  * @mixes ElementMixin
@@ -200,7 +202,6 @@ class ComboBox extends ComboBoxDataProviderMixin(
 
       <vaadin-combo-box-overlay
         id="overlay"
-        hidden$="[[_isOverlayHidden(filteredItems, loading)]]"
         opened="[[_overlayOpened]]"
         loading$="[[loading]]"
         theme$="[[_theme]]"

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

@@ -2,6 +2,7 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/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';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -36,10 +37,7 @@ const comboBoxOverlay = css`
     margin-bottom: var(--lumo-space-xs);
   }
 
-  :host([loading]) [part~='loader'] {
-    box-sizing: border-box;
-    width: var(--lumo-icon-size-s);
-    height: var(--lumo-icon-size-s);
+  [part~='loader'] {
     position: absolute;
     z-index: 1;
     left: var(--lumo-space-s);
@@ -48,38 +46,11 @@ const comboBoxOverlay = css`
     margin-left: auto;
     margin-inline-start: auto;
     margin-inline-end: 0;
-    border: 2px solid transparent;
-    border-color: var(--lumo-primary-color-50pct) var(--lumo-primary-color-50pct) var(--lumo-primary-color)
-      var(--lumo-primary-color);
-    border-radius: calc(0.5 * var(--lumo-icon-size-s));
-    opacity: 0;
-    animation: 1s linear infinite lumo-combo-box-loader-rotate, 0.3s 0.1s lumo-combo-box-loader-fade-in both;
-    pointer-events: none;
-  }
-
-  @keyframes lumo-combo-box-loader-fade-in {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @keyframes lumo-combo-box-loader-rotate {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    100% {
-      transform: rotate(360deg);
-    }
   }
 
   /* RTL specific styles */
 
-  :host([loading][dir='rtl']) [part~='loader'] {
+  :host([dir='rtl']) [part~='loader'] {
     left: auto;
     margin-left: 0;
     margin-right: auto;
@@ -88,6 +59,6 @@ const comboBoxOverlay = css`
   }
 `;
 
-registerStyles('vaadin-combo-box-overlay', [overlay, menuOverlayCore, comboBoxOverlay], {
+registerStyles('vaadin-combo-box-overlay', [overlay, menuOverlayCore, comboBoxOverlay, loader], {
   moduleId: 'lumo-combo-box-overlay',
 });

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

@@ -1,5 +1,6 @@
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/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';
 
@@ -21,102 +22,15 @@ const comboBoxOverlay = css`
     padding: 0;
   }
 
-  :host([loading]) [part='loader'] {
-    height: 2px;
+  [part~='loader'] {
     position: absolute;
     z-index: 1;
     top: -2px;
     left: 0;
     right: 0;
-    background: var(--material-background-color)
-      linear-gradient(
-        90deg,
-        transparent 0%,
-        transparent 20%,
-        var(--material-primary-color) 20%,
-        var(--material-primary-color) 40%,
-        transparent 40%,
-        transparent 60%,
-        var(--material-primary-color) 60%,
-        var(--material-primary-color) 80%,
-        transparent 80%,
-        transparent 100%
-      )
-      0 0 / 400% 100% repeat-x;
-    opacity: 0;
-    animation: 3s linear infinite material-combo-box-loader-progress, 0.3s 0.1s both material-combo-box-loader-fade-in;
-  }
-
-  [part='loader']::before {
-    content: '';
-    display: block;
-    height: 100%;
-    opacity: 0.16;
-    background: var(--material-primary-color);
-  }
-
-  @keyframes material-combo-box-loader-fade-in {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @keyframes material-combo-box-loader-progress {
-    0% {
-      background-position: 0 0;
-      background-size: 300% 100%;
-    }
-
-    33% {
-      background-position: -100% 0;
-      background-size: 400% 100%;
-    }
-
-    67% {
-      background-position: -200% 0;
-      background-size: 250% 100%;
-    }
-
-    100% {
-      background-position: -300% 0;
-      background-size: 300% 100%;
-    }
-  }
-
-  /* RTL specific styles */
-
-  @keyframes material-combo-box-loader-progress-rtl {
-    0% {
-      background-position: 100% 0;
-      background-size: 300% 100%;
-    }
-
-    33% {
-      background-position: 200% 0;
-      background-size: 400% 100%;
-    }
-
-    67% {
-      background-position: 300% 0;
-      background-size: 250% 100%;
-    }
-
-    100% {
-      background-position: 400% 0;
-      background-size: 300% 100%;
-    }
-  }
-
-  :host([loading][dir='rtl']) [part='loader'] {
-    animation: 3s linear infinite material-combo-box-loader-progress-rtl,
-      0.3s 0.1s both material-combo-box-loader-fade-in;
   }
 `;
 
-registerStyles('vaadin-combo-box-overlay', [menuOverlay, comboBoxOverlay], {
+registerStyles('vaadin-combo-box-overlay', [menuOverlay, comboBoxOverlay, loader], {
   moduleId: 'material-combo-box-overlay',
 });