From 9da4d970ced38f6d59d9d4ad197fdeeb0c63380d Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Wed, 3 Jul 2024 14:10:59 -0500
Subject: [PATCH] STCOM-1309 MultiSelection menu overlaps input when rendered
 within an Editable List. (#2313)

* set multiselection preventOverflow modifier to viewport boundary

* log changes
---
 CHANGELOG.md                         | 1 +
 lib/MultiSelection/MultiSelection.js | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fe17935d2..d01dfa143 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@
 * Add translation for `<MultiSelection>` dropdown trigger. Refs FAT-14783.
 * Apply correct widths for `<MultiSelectOptionsList>`. Refs STCOM-1308.
 * Pass the `isCursorAtEnd` property to the textarea props in the `SearchField` component. Refs STCOM-1307.
+* Set `<MultiSelection>`'s popper modifiers to avoid overlap with the control when rendered within an Editable list. Refs STCOM-1309.
 
 ## [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)
diff --git a/lib/MultiSelection/MultiSelection.js b/lib/MultiSelection/MultiSelection.js
index 77e6d08bb..7c556bff2 100644
--- a/lib/MultiSelection/MultiSelection.js
+++ b/lib/MultiSelection/MultiSelection.js
@@ -90,7 +90,7 @@ const MultiSelection = ({
   marginBottom0,
   modifiers = {
     flip: { boundariesElement: 'viewport', padding: 5 },
-    preventOverflow: { boundariesElement: 'scrollParent', padding: 5 },
+    preventOverflow: { boundariesElement: 'viewport', padding: 5 },
   },
   noBorder,
   onAdd = noop,