FIO-7523 Fixed dropdown being inaccessible in flipped state

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();

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);
         });
       });
     });

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;
     }

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);
   }