diff --git a/src/scripts/choices.ts b/src/scripts/choices.ts index 4d39c24bb..f9c53dfbd 100644 --- a/src/scripts/choices.ts +++ b/src/scripts/choices.ts @@ -504,7 +504,7 @@ class Choices implements Choices { requestAnimationFrame(() => { this.dropdown.show(); - this.containerOuter.open(this.dropdown.distanceFromTopWindow); + this.containerOuter.open(this.dropdown.distanceFromTopWindow, this.dropdown.height); if (!preventInputFocus && this._canSearch) { this.input.focus(); diff --git a/src/scripts/components/container.test.ts b/src/scripts/components/container.test.ts index 790c773ff..44b938c04 100644 --- a/src/scripts/components/container.test.ts +++ b/src/scripts/components/container.test.ts @@ -110,7 +110,7 @@ describe('components/container', () => { }); it('returns true', () => { - expect(instance.shouldFlip(100)).to.equal(true); + expect(instance.shouldFlip(100, 100, element)).to.equal(true); }); }); @@ -120,7 +120,7 @@ describe('components/container', () => { }); it('returns false', () => { - expect(instance.shouldFlip(100)).to.equal(false); + expect(instance.shouldFlip(100, 100, element)).to.equal(false); }); }); }); diff --git a/src/scripts/components/container.ts b/src/scripts/components/container.ts index 4b39c1a78..8f6706cca 100644 --- a/src/scripts/components/container.ts +++ b/src/scripts/components/container.ts @@ -61,7 +61,7 @@ export default class Container { * Determine whether container should be flipped based on passed * dropdown position */ - shouldFlip(dropdownPos: number): boolean { + shouldFlip(dropdownPos: number, dropdownHeight: number, containerElem: HTMLElement): boolean { if (typeof dropdownPos !== 'number') { return false; } @@ -72,6 +72,11 @@ export default class Container { if (this.position === 'auto') { shouldFlip = !window.matchMedia(`(min-height: ${dropdownPos + 1}px)`) .matches; + if (shouldFlip) { + if (containerElem.getBoundingClientRect().top - dropdownHeight < 0) { + shouldFlip = false; + } + } } else if (this.position === 'top') { shouldFlip = true; } @@ -87,12 +92,12 @@ export default class Container { this.element.removeAttribute('aria-activedescendant'); } - open(dropdownPos: number): void { + open(dropdownPos: number, dropdownHeight: number): void { this.element.classList.add(this.classNames.openState); this.element.setAttribute('aria-expanded', 'true'); this.isOpen = true; - if (this.shouldFlip(dropdownPos)) { + if (this.shouldFlip(dropdownPos, dropdownHeight, this.element)) { this.element.classList.add(this.classNames.flippedState); this.isFlipped = true; } diff --git a/src/scripts/components/dropdown.ts b/src/scripts/components/dropdown.ts index 224d0da19..82f5a02de 100644 --- a/src/scripts/components/dropdown.ts +++ b/src/scripts/components/dropdown.ts @@ -32,6 +32,10 @@ export default class Dropdown { return this.element.getBoundingClientRect().bottom; } + get height(): number { + return this.element.getBoundingClientRect().height; + } + getChild(selector: string): HTMLElement | null { return this.element.querySelector(selector); }