deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2026-03-14 14:45:47 +01:00
Code Issues Projects Releases Wiki Activity

Fix unit test and simplify calling open/close as the dropdown element is mandatory with some minor code golfing to trim bundle size

Browse source
This commit is contained in:
Xon 2026-02-07 14:44:26 +08:00 • committed by Sebastian Zoglowek
commit 6099879c72
3 changed files with 19 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/scripts/choices.ts
View file

@ -529,21 +529,22 @@ class Choices {
requestAnimationFrame(() => {
const containerRect = this.containerOuter.element.getBoundingClientRect();
const dropdownElement = this.dropdown.element;
if (this._dropdownDetached) {
this.dropdown.element.style.top = `${window.scrollY + containerRect.bottom}px`;
this.dropdown.element.style.left = `${containerRect.left}px`;
this.dropdown.element.style.width = `${containerRect.width}px`;
dropdownElement.style.top = `${window.scrollY + containerRect.bottom}px`;
dropdownElement.style.left = `${containerRect.left}px`;
dropdownElement.style.width = `${containerRect.width}px`;
}
this.dropdown.show();
const dropdownRect = this.dropdown.element.getBoundingClientRect();
const flipped = this.containerOuter.open(dropdownRect.bottom, dropdownRect.height, this.dropdown);
const dropdownRect = dropdownElement.getBoundingClientRect();
const flipped = this.containerOuter.open(dropdownElement, dropdownRect.bottom, dropdownRect.height);
if (this._dropdownDetached && flipped) {
this.dropdown.element.style.top = 'auto'; // ToDo: calc from bottom or top - find a better way
this.dropdown.element.style.bottom = `${document.body.offsetHeight - containerRect.top}px`; // /*- (containerRect.height + dropdownRect.height)}*/
dropdownElement.style.top = 'auto'; // ToDo: calc from bottom or top - find a better way
dropdownElement.style.bottom = `${document.body.offsetHeight - containerRect.top}px`; // /*- (containerRect.height + dropdownRect.height)}*/
}
if (!preventInputFocus) {
@ -563,7 +564,7 @@ class Choices {
requestAnimationFrame(() => {
this.dropdown.hide();
this.containerOuter.close(this.dropdown);
this.containerOuter.close(this.dropdown.element);
if (!preventInputBlur && this._canSearch) {
this.input.removeActiveDescendant();

17
src/scripts/components/container.ts
View file

@ -2,7 +2,6 @@ import { addClassesToElement, removeClassesFromElement } from '../lib/utils';
import { ClassNames } from '../interfaces/class-names';
import { PositionOptionsType } from '../interfaces/position-options-type';
import { PassedElementType, PassedElementTypes } from '../interfaces/passed-element-type';
import Dropdown from './dropdown';
export default class Container {
element: HTMLElement;
@ -69,32 +68,28 @@ export default class Container {
this.element.removeAttribute('aria-activedescendant');
}
open(dropdownPos: number, dropdownHeight: number, dropdown: Dropdown): boolean {
open(dropdown: HTMLElement, dropdownPos: number, dropdownHeight: number): boolean {
addClassesToElement(this.element, this.classNames.openState);
this.element.setAttribute('aria-expanded', 'true');
this.isOpen = true;
if (this.shouldFlip(dropdownPos, dropdownHeight)) {
addClassesToElement(dropdown.element, this.classNames.flippedState);
addClassesToElement(dropdown, this.classNames.flippedState);
this.isFlipped = true;
return true;
}
return false;
return this.isFlipped;
}
close(dropdown: Dropdown): void {
close(dropdown: HTMLElement): void {
removeClassesFromElement(this.element, this.classNames.openState);
this.element.setAttribute('aria-expanded', 'false');
this.removeActiveDescendant();
this.isOpen = false;
// A dropdown flips if it does not have space within the page
if (this.isFlipped) {
removeClassesFromElement(dropdown.element, this.classNames.flippedState);
this.isFlipped = false;
}
removeClassesFromElement(dropdown, this.classNames.flippedState);
this.isFlipped = false;
}
addFocusState(): void {

8
test/scripts/components/container.test.ts
View file

@ -81,7 +81,7 @@ describe('components/container', () => {
describe('open', () => {
beforeEach(() => {
instance.open();
instance.open(element);
});
it('adds open state class', () => {
@ -102,7 +102,7 @@ describe('components/container', () => {
shouldFlipStub = stub().returns(true);
instance.shouldFlip = shouldFlipStub;
instance.open();
instance.open(element);
});
afterEach(() => {
@ -121,7 +121,7 @@ describe('components/container', () => {
describe('close', () => {
beforeEach(() => {
instance.close();
instance.close(element);
});
it('adds open state class', () => {
@ -139,7 +139,7 @@ describe('components/container', () => {
describe('flipped dropdown', () => {
beforeEach(() => {
instance.isFlipped = true;
instance.close();
instance.close(element);
});
it('removes adds flipped state class', () => {