STCOM-1282. Multiselection overlay overlapping input under certain co…

…nditions. (#2269)

* if renderToOverlay is used, set the boundary to the overlay container

* log changes

CHANGELOG.md

@@ -5,6 +5,7 @@
 * Exclude invalid additional currencies. Refs STCOM-1274.
 * Validate ref in `Paneset` before dereferencing it. Refs STCOM-1235.
 * Resolve bug with form control validation styles not rendering. Adjusted order of nested selectors. Refs STCOM-1284.
+* `<MultiSelection/>`'s overlay will use the overlay container as its boundary when the `renderToOverlay` prop is applied, as opposed to the scrollParent of the control. Refs STCOM-1282.
 
 ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.0.0...v12.1.0)

lib/MultiSelection/OptionsListWrapper.js

@@ -16,8 +16,12 @@ const OptionsListWrapper = React.forwardRef(({
   }
 
   let portal;
+  const adjustedModifiers = modifiers;
   if (renderToOverlay) {
     portal = document.getElementById('OverlayContainer');
+    if (adjustedModifiers.preventOverflow) {
+      adjustedModifiers.preventOverflow.boundariesElement = portal;
+    }
   }
 
   return (
@@ -28,7 +32,7 @@ const OptionsListWrapper = React.forwardRef(({
       isOpen={isOpen}
       portal={portal}
       placement="bottom-start"
-      modifiers={modifiers}
+      modifiers={adjustedModifiers}
       hideIfClosed
     >
       {children}