Updated build

Changelog.md

@@ -1,3 +1,3 @@
-## [Unreleased: 10.2.1-rc.1]
+## 10.2.1-rc.1
 ### Changed
  - FIO-7523 Fixed dropdown being inaccessible in flipped state

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/choices.js",
-  "version": "10.2.0",
+  "version": "10.2.1-rc.1",
   "description": "A vanilla JS customisable text input/select box plugin",
   "main": "./public/assets/scripts/choices.js",
   "types": "./public/types/src/index.d.ts",

public/assets/scripts/choices.js

@@ -1,4 +1,4 @@
-/*! @formio/choices.js v10.2.0 | © 2023 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
+/*! @formio/choices.js v10.2.1-rc.1 | © 2024 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory();
@@ -543,7 +543,7 @@ var Choices = /** @class */function () {
     }
     requestAnimationFrame(function () {
       _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();
       }
@@ -2129,7 +2129,7 @@ var Container = /** @class */function () {
    * Determine whether container should be flipped based on passed
    * dropdown position
    */
-  Container.prototype.shouldFlip = function (dropdownPos) {
+  Container.prototype.shouldFlip = function (dropdownPos, dropdownHeight, containerElem) {
     if (typeof dropdownPos !== 'number') {
       return false;
     }
@@ -2138,6 +2138,11 @@ var Container = /** @class */function () {
     var shouldFlip = false;
     if (this.position === 'auto') {
       shouldFlip = !window.matchMedia("(min-height: ".concat(dropdownPos + 1, "px)")).matches;
+      if (shouldFlip) {
+        if (containerElem.getBoundingClientRect().top - dropdownHeight < 0) {
+          shouldFlip = false;
+        }
+      }
     } else if (this.position === 'top') {
       shouldFlip = true;
     }
@@ -2149,11 +2154,11 @@ var Container = /** @class */function () {
   Container.prototype.removeActiveDescendant = function () {
     this.element.removeAttribute('aria-activedescendant');
   };
-  Container.prototype.open = function (dropdownPos) {
+  Container.prototype.open = function (dropdownPos, dropdownHeight) {
     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;
     }
@@ -2257,6 +2262,13 @@ var Dropdown = /** @class */function () {
     enumerable: false,
     configurable: true
   });
+  Object.defineProperty(Dropdown.prototype, "height", {
+    get: function () {
+      return this.element.getBoundingClientRect().height;
+    },
+    enumerable: false,
+    configurable: true
+  });
   Dropdown.prototype.getChild = function (selector) {
     return this.element.querySelector(selector);
   };

public/assets/scripts/choices.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! @formio/choices.js v10.2.0 | © 2023 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
+/*! @formio/choices.js v10.2.1-rc.1 | © 2024 Josh Johnson | https://github.com/jshjohnson/Choices#readme */

public/types/src/scripts/components/container.d.ts

@@ -23,10 +23,10 @@ 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;
     setActiveDescendant(activeDescendantID: string): void;
     removeActiveDescendant(): void;
-    open(dropdownPos: number): void;
+    open(dropdownPos: number, dropdownHeight: number): void;
     close(): void;
     focus(): void;
     addFocusState(): void;

public/types/src/scripts/components/dropdown.d.ts

@@ -14,6 +14,7 @@ export default class Dropdown {
      * Bottom position of dropdown in viewport coordinates
      */
     get distanceFromTopWindow(): number;
+    get height(): number;
     getChild(selector: string): HTMLElement | null;
     /**
      * Show dropdown to user by adding active state class