@vaadin/combo-box 24.8.4 → 25.0.0-alpha10

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

@@ -3,19 +3,8 @@
  * Copyright (c) 2015 - 2025 Vaadin Ltd.
  * 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, isKeyboardActive } 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';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
-import { get } from '@vaadin/component-base/src/path-utils.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';
+import { ComboBoxItemsMixin } from './vaadin-combo-box-items-mixin.js';
 
 /**
  * Checks if the value is supported as an item value in this control.
@@ -27,73 +16,16 @@ function isValidValue(value) {
   return value !== undefined && value !== null;
 }
 
-/**
- * Returns the index of the first item that satisfies the provided testing function
- * ignoring placeholder items.
- *
- * @param {Array<ComboBoxItem | string>} items
- * @param {Function} callback
- * @return {number}
- */
-function findItemIndex(items, callback) {
-  return items.findIndex((item) => {
-    if (item instanceof ComboBoxPlaceholder) {
-      return false;
-    }
-
-    return callback(item);
-  });
-}
-
 /**
  * @polymerMixin
- * @mixes ControllerMixin
+ * @mixes ComboBoxItemsMixin
  * @mixes ValidateMixin
- * @mixes DisabledMixin
- * @mixes InputMixin
- * @mixes KeyboardMixin
- * @mixes FocusMixin
- * @mixes OverlayClassMixin
- * @param {function(new:HTMLElement)} subclass
+ * @param {function(new:HTMLElement)} superClass
  */
-export const ComboBoxMixin = (subclass) =>
-  class ComboBoxMixinClass extends OverlayClassMixin(
-    ControllerMixin(ValidateMixin(FocusMixin(KeyboardMixin(InputMixin(DisabledMixin(subclass)))))),
-  ) {
+export const ComboBoxMixin = (superClass) =>
+  class ComboBoxMixinClass extends ValidateMixin(ComboBoxItemsMixin(superClass)) {
     static get properties() {
       return {
-        /**
-         * True if the dropdown is open, false otherwise.
-         * @type {boolean}
-         */
-        opened: {
-          type: Boolean,
-          notify: true,
-          value: false,
-          reflectToAttribute: true,
-          sync: true,
-          observer: '_openedChanged',
-        },
-
-        /**
-         * Set true to prevent the overlay from opening automatically.
-         * @attr {boolean} auto-open-disabled
-         */
-        autoOpenDisabled: {
-          type: Boolean,
-          sync: true,
-        },
-
-        /**
-         * When present, it specifies that the field is read-only.
-         * @type {boolean}
-         */
-        readonly: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-        },
-
         /**
          * Custom function for rendering the content of every item.
          * Receives three arguments:
@@ -111,17 +43,6 @@ export const ComboBoxMixin = (subclass) =>
           sync: true,
         },
 
-        /**
-         * A full set of items to filter the visible options from.
-         * The items can be of either `String` or `Object` type.
-         * @type {!Array<!ComboBoxItem | string> | undefined}
-         */
-        items: {
-          type: Array,
-          sync: true,
-          observer: '_itemsChanged',
-        },
-
         /**
          * If `true`, the user can input a value that is not present in the items list.
          * `value` property will be set to the input value in this case.
@@ -135,24 +56,6 @@ export const ComboBoxMixin = (subclass) =>
           value: false,
         },
 
-        /**
-         * A subset of items, filtered based on the user input. Filtered items
-         * can be assigned directly to omit the internal filtering functionality.
-         * The items can be of either `String` or `Object` type.
-         * @type {!Array<!ComboBoxItem | string> | undefined}
-         */
-        filteredItems: {
-          type: Array,
-          observer: '_filteredItemsChanged',
-          sync: true,
-        },
-
-        /**
-         * Used to detect user value changes and fire `change` events.
-         * @private
-         */
-        _lastCommittedValue: String,
-
         /**
          * When set to `true`, "loading" attribute is added to host and the overlay element.
          * @type {boolean}
@@ -164,28 +67,6 @@ export const ComboBoxMixin = (subclass) =>
           sync: true,
         },
 
-        /**
-         * @type {number}
-         * @protected
-         */
-        _focusedIndex: {
-          type: Number,
-          observer: '_focusedIndexChanged',
-          value: -1,
-          sync: true,
-        },
-
-        /**
-         * Filtering string the user has typed into the input field.
-         * @type {string}
-         */
-        filter: {
-          type: String,
-          value: '',
-          notify: true,
-          sync: true,
-        },
-
         /**
          * The selected item from the `items` array.
          * @type {ComboBoxItem | string | undefined}
@@ -206,39 +87,6 @@ export const ComboBoxMixin = (subclass) =>
           type: Object,
         },
 
-        /**
-         * Path for label of the item. If `items` is an array of objects, the
-         * `itemLabelPath` is used to fetch the displayed string label for each
-         * item.
-         *
-         * The item label is also used for matching items when processing user
-         * input, i.e., for filtering and selecting items.
-         * @attr {string} item-label-path
-         * @type {string}
-         */
-        itemLabelPath: {
-          type: String,
-          value: 'label',
-          observer: '_itemLabelPathChanged',
-          sync: true,
-        },
-
-        /**
-         * Path for the value of the item. If `items` is an array of objects, the
-         * `itemValuePath:` is used to fetch the string value for the selected
-         * item.
-         *
-         * The item value is used in the `value` property of the combo box,
-         * to provide the form value.
-         * @attr {string} item-value-path
-         * @type {string}
-         */
-        itemValuePath: {
-          type: String,
-          value: 'value',
-          sync: true,
-        },
-
         /**
          * Path for the id of the item. If `items` is an array of objects,
          * the `itemIdPath` is used to compare and identify the same item
@@ -251,40 +99,6 @@ export const ComboBoxMixin = (subclass) =>
           sync: true,
         },
 
-        /**
-         * @type {!HTMLElement | undefined}
-         * @protected
-         */
-        _toggleElement: {
-          type: Object,
-          observer: '_toggleElementChanged',
-        },
-
-        /**
-         * Set of items to be rendered in the dropdown.
-         * @protected
-         */
-        _dropdownItems: {
-          type: Array,
-          sync: true,
-        },
-
-        /** @private */
-        _closeOnBlurIsPrevented: Boolean,
-
-        /** @private */
-        _scroller: {
-          type: Object,
-          sync: true,
-        },
-
-        /** @private */
-        _overlayOpened: {
-          type: Boolean,
-          sync: true,
-          observer: '_overlayOpenedChanged',
-        },
-
         /** @private */
         __keepOverlayOpened: {
           type: Boolean,
@@ -295,105 +109,23 @@ export const ComboBoxMixin = (subclass) =>
 
     static get observers() {
       return [
-        '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)',
         '_openedOrItemsChanged(opened, _dropdownItems, loading, __keepOverlayOpened)',
-        '_updateScroller(_scroller, _dropdownItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, _theme, itemClassNameGenerator)',
+        '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)',
+        '_updateScroller(opened, _dropdownItems, _focusedIndex, _theme)',
       ];
     }
 
-    constructor() {
-      super();
-      this._boundOverlaySelectedItemChanged = this._overlaySelectedItemChanged.bind(this);
-      this._boundOnClearButtonMouseDown = this.__onClearButtonMouseDown.bind(this);
-      this._boundOnClick = this._onClick.bind(this);
-      this._boundOnOverlayTouchAction = this._onOverlayTouchAction.bind(this);
-      this._boundOnTouchend = this._onTouchend.bind(this);
-    }
-
-    /**
-     * Tag name prefix used by scroller and items.
-     * @protected
-     * @return {string}
-     */
-    get _tagNamePrefix() {
-      return 'vaadin-combo-box';
-    }
-
-    /**
-     * 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(inputElement) {
-      super._inputElementChanged(inputElement);
-
-      const input = this._nativeInput;
-
-      if (input) {
-        input.autocomplete = 'off';
-        input.autocapitalize = 'off';
-
-        input.setAttribute('role', 'combobox');
-        input.setAttribute('aria-autocomplete', 'list');
-        input.setAttribute('aria-expanded', !!this.opened);
-
-        // Disable the macOS Safari spell check auto corrections.
-        input.setAttribute('spellcheck', 'false');
-
-        // Disable iOS autocorrect suggestions.
-        input.setAttribute('autocorrect', 'off');
-
-        this._revertInputValueToValue();
-
-        if (this.clearElement) {
-          this.clearElement.addEventListener('mousedown', this._boundOnClearButtonMouseDown);
-        }
-      }
-    }
-
     /** @protected */
     ready() {
       super.ready();
 
-      this._initOverlay();
-      this._initScroller();
-
+      /**
+       * Used to detect user value changes and fire `change` events.
+       * Do not define in `properties` to avoid triggering updates.
+       * @type {string}
+       * @protected
+       */
       this._lastCommittedValue = this.value;
-
-      this.addEventListener('click', this._boundOnClick);
-      this.addEventListener('touchend', this._boundOnTouchend);
-
-      const bringToFrontListener = () => {
-        requestAnimationFrame(() => {
-          this._overlayElement.bringToFront();
-        });
-      };
-
-      this.addEventListener('mousedown', bringToFrontListener);
-      this.addEventListener('touchstart', bringToFrontListener);
-
-      processTemplates(this);
-
-      this.addController(new VirtualKeyboardController(this));
-    }
-
-    /** @protected */
-    disconnectedCallback() {
-      super.disconnectedCallback();
-
-      // Close the overlay on detach
-      this.close();
     }
 
     /**
@@ -415,135 +147,32 @@ export const ComboBoxMixin = (subclass) =>
     }
 
     /**
-     * Opens the dropdown list.
-     */
-    open() {
-      // Prevent _open() being called when input is disabled or read-only
-      if (!this.disabled && !this.readonly) {
-        this.opened = true;
-      }
-    }
-
-    /**
-     * Closes the dropdown list.
-     */
-    close() {
-      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);
-      }
-    }
-
-    /**
-     * Override LitElement lifecycle callback to handle filter property change.
      * @param {Object} props
      * @protected
      */
     updated(props) {
       super.updated(props);
 
-      if (props.has('filter')) {
-        this._filterChanged(this.filter);
-      }
-    }
-
-    /** @private */
-    _initOverlay() {
-      const overlay = this.$.overlay;
-
-      // Store instance for detecting "dir" attribute on opening
-      overlay._comboBox = this;
-
-      overlay.addEventListener('touchend', this._boundOnOverlayTouchAction);
-      overlay.addEventListener('touchmove', this._boundOnOverlayTouchAction);
-
-      // Prevent blurring the input when clicking inside the overlay
-      overlay.addEventListener('mousedown', (e) => e.preventDefault());
-
-      // Manual two-way binding for the overlay "opened" property
-      overlay.addEventListener('opened-changed', (e) => {
-        this._overlayOpened = e.detail.value;
-      });
-
-      this._overlayElement = overlay;
-    }
-
-    /**
-     * Create and initialize the scroller element.
-     * Override to provide custom host reference.
-     *
-     * @protected
-     */
-    _initScroller(host) {
-      const scroller = document.createElement(`${this._tagNamePrefix}-scroller`);
-
-      scroller.owner = host || this;
-      scroller.getItemLabel = this._getItemLabel.bind(this);
-      scroller.addEventListener('selection-changed', this._boundOverlaySelectedItemChanged);
-
-      const overlay = this._overlayElement;
-
-      overlay.renderer = (root) => {
-        if (!root.innerHTML) {
-          root.appendChild(scroller);
+      ['loading', 'itemIdPath', 'itemClassNameGenerator', 'renderer', 'selectedItem'].forEach((prop) => {
+        if (props.has(prop)) {
+          this._scroller[prop] = this[prop];
         }
-      };
-
-      // Ensure the scroller is rendered
-      overlay.requestContentUpdate();
-
-      // Trigger the observer to set properties
-      this._scroller = scroller;
+      });
     }
 
     /** @private */
-    // eslint-disable-next-line @typescript-eslint/max-params
-    _updateScroller(
-      scroller,
-      items,
-      opened,
-      loading,
-      selectedItem,
-      itemIdPath,
-      focusedIndex,
-      renderer,
-      theme,
-      itemClassNameGenerator,
-    ) {
-      if (scroller) {
-        if (opened) {
-          scroller.style.maxHeight =
-            getComputedStyle(this).getPropertyValue(`--${this._tagNamePrefix}-overlay-max-height`) || '65vh';
-        }
-
-        scroller.setProperties({
-          items: opened ? items : [],
-          opened,
-          loading,
-          selectedItem,
-          itemIdPath,
-          focusedIndex,
-          renderer,
-          theme,
-          itemClassNameGenerator,
-        });
+    _updateScroller(opened, items, focusedIndex, theme) {
+      if (opened) {
+        this._scroller.style.maxHeight =
+          getComputedStyle(this).getPropertyValue(`--${this._tagNamePrefix}-overlay-max-height`) || '65vh';
       }
+
+      this._scroller.setProperties({
+        items: opened ? items : [],
+        opened,
+        focusedIndex,
+        theme,
+      });
     }
 
     /** @private */
@@ -553,258 +182,39 @@ export const ComboBoxMixin = (subclass) =>
       this._overlayOpened = opened && (keepOverlayOpened || loading || !!(items && items.length));
     }
 
-    /** @private */
-    _overlayOpenedChanged(opened, wasOpened) {
-      if (opened) {
-        this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-opened', { bubbles: true, composed: true }));
-
-        this._onOpened();
-      } else if (wasOpened && this._dropdownItems && this._dropdownItems.length) {
-        this.close();
-
-        this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-closed', { bubbles: true, composed: true }));
-      }
-    }
-
-    /** @private */
-    _focusedIndexChanged(index, oldIndex) {
-      if (oldIndex === undefined) {
-        return;
-      }
-      this._updateActiveDescendant(index);
-    }
-
-    /** @protected */
-    _isInputFocused() {
-      return this.inputElement && isElementFocused(this.inputElement);
-    }
-
-    /** @private */
-    _updateActiveDescendant(index) {
-      const input = this._nativeInput;
-      if (!input) {
-        return;
-      }
-
-      const item = this._getItemElements().find((el) => el.index === index);
-      if (item) {
-        input.setAttribute('aria-activedescendant', item.id);
-      } else {
-        input.removeAttribute('aria-activedescendant');
-      }
-    }
-
-    /** @private */
-    _openedChanged(opened, wasOpened) {
-      // Prevent _close() being called when opened is set to its default value (false).
-      if (wasOpened === undefined) {
-        return;
-      }
-
-      if (opened) {
-        // For touch devices, we don't want to popup virtual keyboard
-        // unless input element is explicitly focused by the user.
-        if (!this._isInputFocused() && !isTouch) {
-          if (this.inputElement) {
-            this.inputElement.focus();
-          }
-        }
-      } else {
-        this._onClosed();
-      }
-
-      const input = this._nativeInput;
-      if (input) {
-        input.setAttribute('aria-expanded', !!opened);
-
-        if (opened) {
-          input.setAttribute('aria-controls', this._scroller.id);
-        } else {
-          input.removeAttribute('aria-controls');
-        }
-      }
-    }
-
-    /** @private */
-    _onOverlayTouchAction() {
-      // On touch devices, blur the input on touch start inside the overlay, in order to hide
-      // the virtual keyboard. But don't close the overlay on this blur.
-      this._closeOnBlurIsPrevented = true;
-      this.inputElement.blur();
-      this._closeOnBlurIsPrevented = false;
-    }
-
-    /** @protected */
-    _isClearButton(event) {
-      return event.composedPath()[0] === this.clearElement;
-    }
-
-    /** @private */
-    __onClearButtonMouseDown(event) {
-      event.preventDefault(); // Prevent native focusout event
-      this.inputElement.focus();
-    }
-
     /**
+     * Override method from `ComboBoxBaseMixin` to deselect
+     * dropdown item by requesting content update on clear.
      * @param {Event} event
      * @protected
      */
     _onClearButtonClick(event) {
-      event.preventDefault();
-      this._onClearAction();
+      super._onClearButtonClick(event);
 
-      // De-select dropdown item
       if (this.opened) {
         this.requestContentUpdate();
       }
     }
 
     /**
-     * @param {Event} event
-     * @private
-     */
-    _onToggleButtonClick(event) {
-      // Prevent parent components such as `vaadin-grid`
-      // from handling the click event after it bubbles.
-      event.preventDefault();
-
-      if (this.opened) {
-        this.close();
-      } else {
-        this.open();
-      }
-    }
-
-    /**
-     * @param {Event} event
+     * Override method inherited from `InputMixin`
+     * to revert the input value to value.
      * @protected
+     * @override
      */
-    _onHostClick(event) {
-      if (!this.autoOpenDisabled) {
-        event.preventDefault();
-        this.open();
-      }
-    }
+    _inputElementChanged(input) {
+      super._inputElementChanged(input);
 
-    /** @private */
-    _onClick(event) {
-      if (this._isClearButton(event)) {
-        this._onClearButtonClick(event);
-      } else if (event.composedPath().includes(this._toggleElement)) {
-        this._onToggleButtonClick(event);
-      } else {
-        this._onHostClick(event);
+      if (input) {
+        this._revertInputValueToValue();
       }
     }
 
     /**
-     * Override an event listener from `KeyboardMixin`.
-     *
-     * @param {KeyboardEvent} e
+     * Override method from `ComboBoxBaseMixin` to handle loading.
      * @protected
      * @override
      */
-    _onKeyDown(e) {
-      super._onKeyDown(e);
-
-      if (e.key === 'ArrowDown') {
-        this._onArrowDown();
-
-        // Prevent caret from moving
-        e.preventDefault();
-      } else if (e.key === 'ArrowUp') {
-        this._onArrowUp();
-
-        // Prevent caret from moving
-        e.preventDefault();
-      }
-    }
-
-    /** @private */
-    _getItemLabel(item) {
-      let label = item && this.itemLabelPath ? get(this.itemLabelPath, item) : undefined;
-      if (label === undefined || label === null) {
-        label = item ? item.toString() : '';
-      }
-      return label;
-    }
-
-    /** @private */
-    _getItemValue(item) {
-      let value = item && this.itemValuePath ? get(this.itemValuePath, item) : undefined;
-      if (value === undefined) {
-        value = item ? item.toString() : '';
-      }
-      return value;
-    }
-
-    /** @private */
-    _onArrowDown() {
-      if (this.opened) {
-        const items = this._dropdownItems;
-        if (items) {
-          this._focusedIndex = Math.min(items.length - 1, this._focusedIndex + 1);
-          this._prefillFocusedItemLabel();
-        }
-      } else {
-        this.open();
-      }
-    }
-
-    /** @private */
-    _onArrowUp() {
-      if (this.opened) {
-        if (this._focusedIndex > -1) {
-          this._focusedIndex = Math.max(0, this._focusedIndex - 1);
-        } else {
-          const items = this._dropdownItems;
-          if (items) {
-            this._focusedIndex = items.length - 1;
-          }
-        }
-
-        this._prefillFocusedItemLabel();
-      } else {
-        this.open();
-      }
-    }
-
-    /** @private */
-    _prefillFocusedItemLabel() {
-      if (this._focusedIndex > -1) {
-        const focusedItem = this._dropdownItems[this._focusedIndex];
-        this._inputElementValue = this._getItemLabel(focusedItem);
-        this._markAllSelectionRange();
-      }
-    }
-
-    /** @private */
-    _setSelectionRange(start, end) {
-      // Setting selection range focuses and/or moves the caret in some browsers,
-      // 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.
-      if (this._isInputFocused() && this.inputElement.setSelectionRange) {
-        this.inputElement.setSelectionRange(start, end);
-      }
-    }
-
-    /** @private */
-    _markAllSelectionRange() {
-      if (this._inputElementValue !== undefined) {
-        this._setSelectionRange(0, this._inputElementValue.length);
-      }
-    }
-
-    /** @private */
-    _clearSelectionRange() {
-      if (this._inputElementValue !== undefined) {
-        const pos = this._inputElementValue ? this._inputElementValue.length : 0;
-        this._setSelectionRange(pos, pos);
-      }
-    }
-
-    /** @private */
     _closeOrCommit() {
       if (!this.opened && !this.loading) {
         this._commitValue();
@@ -814,39 +224,10 @@ export const ComboBoxMixin = (subclass) =>
     }
 
     /**
-     * Override an event listener from `KeyboardMixin`.
-     *
-     * @param {KeyboardEvent} e
+     * Override method from `ComboBoxBaseMixin` to handle valid value.
      * @protected
      * @override
      */
-    _onEnter(e) {
-      // Do not commit value when custom values are disallowed and input value is not a valid option
-      // also stop propagation of the event, otherwise the user could submit a form while the input
-      // still contains an invalid value
-      if (!this._hasValidInputValue()) {
-        // Do not submit the surrounding form.
-        e.preventDefault();
-        // Do not trigger global listeners
-        e.stopPropagation();
-        return;
-      }
-
-      // Stop propagation of the enter event only if the dropdown is opened, this
-      // "consumes" the enter event for the action of closing the dropdown
-      if (this.opened) {
-        // Do not submit the surrounding form.
-        e.preventDefault();
-        // Do not trigger global listeners
-        e.stopPropagation();
-      }
-
-      this._closeOrCommit();
-    }
-
-    /**
-     * @protected
-     */
     _hasValidInputValue() {
       const hasInvalidOption =
         this._focusedIndex < 0 &&
@@ -857,62 +238,18 @@ export const ComboBoxMixin = (subclass) =>
     }
 
     /**
-     * Override an event listener from `KeyboardMixin`.
-     * Do not call `super` in order to override clear
-     * button logic defined in `InputControlMixin`.
-     *
-     * @param {!KeyboardEvent} e
+     * Override method from `ComboBoxBaseMixin`.
      * @protected
      * @override
      */
-    _onEscape(e) {
-      if (
-        this.autoOpenDisabled &&
-        (this.opened || (this.value !== this._inputElementValue && this._inputElementValue.length > 0))
-      ) {
-        // Auto-open is disabled
-        // 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.opened) {
-        // Auto-open is enabled
-        // The overlay is open
-        e.stopPropagation();
-
-        if (this._focusedIndex > -1) {
-          // An item is focused, revert the input to the filtered value
-          this._focusedIndex = -1;
-          this._revertInputValue();
-        } else {
-          // No item is focused, cancel the change and close the overlay
-          this.cancel();
-        }
-      } else if (this.clearButtonVisible && !!this.value && !this.readonly) {
-        e.stopPropagation();
-        // The clear button is visible and the overlay is closed, so clear the value.
-        this._onClearAction();
-      }
-    }
-
-    /** @private */
-    _toggleElementChanged(toggleElement) {
-      if (toggleElement) {
-        // Don't blur the input on toggle mousedown
-        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._isInputFocused()) {
-            document.activeElement.blur();
-          }
-        });
-      }
+    _onEscapeCancel() {
+      this.cancel();
     }
 
     /**
-     * Clears the current value.
+     * Override method from `ComboBoxBaseMixin` to reset selected item.
      * @protected
+     * @override
      */
     _onClearAction() {
       this.selectedItem = null;
@@ -943,20 +280,43 @@ export const ComboBoxMixin = (subclass) =>
       this._closeOrCommit();
     }
 
-    /** @private */
+    /**
+     * Override method from `ComboBoxBaseMixin` to store last committed value.
+     * @protected
+     * @override
+     */
     _onOpened() {
+      this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-opened', { bubbles: true, composed: true }));
+
       // _detectAndDispatchChange() should not consider value changes done before opening
       this._lastCommittedValue = this.value;
     }
 
-    /** @private */
+    /**
+     * Override method from `ComboBoxBaseMixin` to dispatch an event.
+     * @protected
+     * @override
+     */
+    _onOverlayClosed() {
+      this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-closed', { bubbles: true, composed: true }));
+    }
+
+    /**
+     * Override method from `ComboBoxBaseMixin` to commit value on overlay closing.
+     * @protected
+     * @override
+     */
     _onClosed() {
       if (!this.loading || this.allowCustomValue) {
         this._commitValue();
       }
     }
 
-    /** @private */
+    /**
+     * Override method from `ComboBoxBaseMixin` to implement value commit logic.
+     * @protected
+     * @override
+     */
     _commitValue() {
       if (this._focusedIndex > -1) {
         const focusedItem = this._dropdownItems[this._focusedIndex];
@@ -1015,36 +375,6 @@ export const ComboBoxMixin = (subclass) =>
       this._clearFilter();
     }
 
-    /**
-     * Override an event listener from `InputMixin`.
-     * @param {!Event} event
-     * @protected
-     * @override
-     */
-    _onInput(event) {
-      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 = {};
-
-      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);
-      } else {
-        props.filter = filter;
-      }
-
-      if (!this.opened && !this._isClearButton(event) && !this.autoOpenDisabled) {
-        props.opened = true;
-      }
-
-      this.setProperties(props);
-    }
-
     /**
      * Override an event listener from `InputMixin`.
      * @param {!Event} event
@@ -1057,31 +387,11 @@ export const ComboBoxMixin = (subclass) =>
       event.stopPropagation();
     }
 
-    /** @private */
-    _itemLabelPathChanged(itemLabelPath) {
-      if (typeof itemLabelPath !== 'string') {
-        console.error('You should set itemLabelPath to a valid string');
-      }
-    }
-
-    /** @private */
-    _filterChanged(filter) {
-      // Scroll to the top of the list whenever the filter changes.
-      this._scrollIntoView(0);
-
-      this._focusedIndex = -1;
-
-      if (this.items) {
-        this.filteredItems = this._filterItems(this.items, filter);
-      } else {
-        // With certain use cases (e. g., external filtering), `items` are
-        // undefined. Filtering is unnecessary per se, but the filteredItems
-        // observer should still be invoked to update focused item.
-        this._filteredItemsChanged(this.filteredItems);
-      }
-    }
-
-    /** @protected */
+    /**
+     * Override method from `ComboBoxBaseMixin` to handle reverting value.
+     * @protected
+     * @override
+     */
     _revertInputValue() {
       if (this.filter !== '') {
         this._inputElementValue = this.filter;
@@ -1173,40 +483,6 @@ export const ComboBoxMixin = (subclass) =>
       }
     }
 
-    /** @private */
-    _itemsChanged(items, oldItems) {
-      this._ensureItemsOrDataProvider(() => {
-        this.items = oldItems;
-      });
-
-      if (items) {
-        this.filteredItems = items.slice(0);
-      } else if (oldItems) {
-        // Only clear filteredItems if the component had items previously but got cleared
-        this.filteredItems = null;
-      }
-    }
-
-    /** @private */
-    _filteredItemsChanged(filteredItems) {
-      this._setDropdownItems(filteredItems);
-    }
-
-    /** @private */
-    _filterItems(arr, filter) {
-      if (!arr) {
-        return arr;
-      }
-
-      const filteredItems = arr.filter((item) => {
-        filter = filter ? filter.toString().toLowerCase() : '';
-        // Check if item contains input value.
-        return this._getItemLabel(item).toString().toLowerCase().indexOf(filter) > -1;
-      });
-
-      return filteredItems;
-    }
-
     /** @private */
     _selectItemForValue(value) {
       const valueIndex = this.__getItemIndexByValue(this.filteredItems, value);
@@ -1230,6 +506,7 @@ export const ComboBoxMixin = (subclass) =>
      * Override this method to show custom items.
      *
      * @protected
+     * @override
      */
     _setDropdownItems(newItems) {
       const oldItems = this._dropdownItems;
@@ -1262,135 +539,20 @@ export const ComboBoxMixin = (subclass) =>
       }
     }
 
-    /** @private */
-    _getItemElements() {
-      return Array.from(this._scroller.querySelectorAll(`${this._tagNamePrefix}-item`));
-    }
-
-    /** @private */
-    _scrollIntoView(index) {
-      if (!this._scroller) {
-        return;
-      }
-      this._scroller.scrollIntoView(index);
-    }
-
-    /**
-     * Returns the first item that matches the provided value.
-     *
-     * @private
-     */
-    __getItemIndexByValue(items, value) {
-      if (!items || !isValidValue(value)) {
-        return -1;
-      }
-
-      return findItemIndex(items, (item) => {
-        return this._getItemValue(item) === value;
-      });
-    }
-
-    /**
-     * Returns the first item that matches the provided label.
-     * Labels are matched against each other case insensitively.
-     *
-     * @private
-     */
-    __getItemIndexByLabel(items, label) {
-      if (!items || !label) {
-        return -1;
-      }
-
-      return findItemIndex(items, (item) => {
-        return this._getItemLabel(item).toString().toLowerCase() === label.toString().toLowerCase();
-      });
-    }
-
-    /** @private */
-    _overlaySelectedItemChanged(e) {
-      // Stop this private event from leaking outside.
-      e.stopPropagation();
-
-      if (e.detail.item instanceof ComboBoxPlaceholder) {
-        // Placeholder items should not be selectable.
-        return;
-      }
-
-      if (this.opened) {
-        this._focusedIndex = this.filteredItems.indexOf(e.detail.item);
-        this.close();
-      }
-    }
-
-    /**
-     * 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);
-
-      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) {
-          delete this._lastCustomValue;
-          return;
-        }
-
-        if (isKeyboardActive()) {
-          // Close on Tab key causing blur. With mouse, close on outside click instead.
-          this._closeOrCommit();
-          return;
-        }
-
-        if (!this.opened) {
-          this._commitValue();
-        } else if (!this._overlayOpened) {
-          // Combo-box is opened, but overlay is not visible -> custom value was entered.
-          // Make sure we close here as there won't be an "outside click" in this case.
-          this.close();
-        }
-      }
-    }
-
     /**
-     * Override method inherited from `FocusMixin` to not remove focused
-     * state when focus moves to the overlay.
-     *
-     * @param {FocusEvent} event
-     * @return {boolean}
+     * Override method from `ComboBoxBaseMixin`.
      * @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) {
+    _handleFocusOut() {
+      // 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) {
+        delete this._lastCustomValue;
         return;
       }
 
-      event.preventDefault();
-      this._onClearAction();
+      super._handleFocusOut();
     }
 
     /**