Only add events and more when the dropdown is detached

This commit is contained in:
Sebastian Zoglowek 2026-02-24 11:34:04 +01:00
commit d90693da2d
2 changed files with 16 additions and 8 deletions

View file

@ -1572,8 +1572,6 @@ class Choices {
documentElement.addEventListener('touchend', this._onTouchEnd, true);
outerElement.addEventListener('keydown', this._onKeyDown, true);
outerElement.addEventListener('mousedown', this._onMouseDown, true);
dropdownElement.addEventListener('keydown', this._onKeyDown, true);
dropdownElement.addEventListener('mousedown', this._onMouseDown, true);
// passive events - doesn't call `preventDefault` or `stopPropagation`
documentElement.addEventListener('click', this._onClick, { passive: true });
@ -1624,6 +1622,8 @@ class Choices {
}
if (this._dropdownDetached) {
dropdownElement.addEventListener('keydown', this._onKeyDown, true);
dropdownElement.addEventListener('mousedown', this._onMouseDown, true);
window.addEventListener('resize', this._onWindowResize);
}
@ -1640,8 +1640,6 @@ class Choices {
documentElement.removeEventListener('touchend', this._onTouchEnd, true);
outerElement.removeEventListener('keydown', this._onKeyDown, true);
outerElement.removeEventListener('mousedown', this._onMouseDown, true);
dropdownElement.removeEventListener('keydown', this._onKeyDown);
dropdownElement.removeEventListener('mousedown', this._onMouseDown);
documentElement.removeEventListener('click', this._onClick);
documentElement.removeEventListener('touchmove', this._onTouchMove);
@ -1667,6 +1665,8 @@ class Choices {
}
if (this._dropdownDetached) {
dropdownElement.removeEventListener('keydown', this._onKeyDown);
dropdownElement.removeEventListener('mousedown', this._onMouseDown);
window.removeEventListener('resize', this._onWindowResize);
}

View file

@ -68,21 +68,25 @@ export default class Container {
this.element.removeAttribute('aria-activedescendant');
}
open(dropdownPos: number, dropdownHeight: number, dropdown: HTMLElement): boolean {
open(dropdownPos: number, dropdownHeight: number, dropdown: HTMLElement | null = null): boolean {
addClassesToElement(this.element, this.classNames.openState);
this.element.setAttribute('aria-expanded', 'true');
this.isOpen = true;
if (this.shouldFlip(dropdownPos, dropdownHeight)) {
addClassesToElement(this.element, this.classNames.flippedState);
addClassesToElement(dropdown, this.classNames.flippedState);
if (dropdown !== null) {
addClassesToElement(dropdown, this.classNames.flippedState);
}
this.isFlipped = true;
}
return this.isFlipped;
}
close(dropdown: HTMLElement): void {
close(dropdown: HTMLElement | null = null): void {
removeClassesFromElement(this.element, this.classNames.openState);
this.element.setAttribute('aria-expanded', 'false');
this.removeActiveDescendant();
@ -90,7 +94,11 @@ export default class Container {
// A dropdown flips if it does not have space within the page
removeClassesFromElement(this.element, this.classNames.flippedState);
removeClassesFromElement(dropdown, this.classNames.flippedState);
if (dropdown !== null) {
removeClassesFromElement(dropdown, this.classNames.flippedState);
}
this.isFlipped = false;
}