diff --git a/services/web/frontend/js/shared/components/focus-trap.tsx b/services/web/frontend/js/shared/components/focus-trap.tsx
index e36a8bffff..d7c63e3caf 100644
--- a/services/web/frontend/js/shared/components/focus-trap.tsx
+++ b/services/web/frontend/js/shared/components/focus-trap.tsx
@@ -25,7 +25,7 @@ export default function FocusTrap({
fallbackFocus: () => containerRef.current as HTMLElement,
}}
>
-
+
{children}
diff --git a/services/web/frontend/js/shared/components/ol/ol-autocomplete.tsx b/services/web/frontend/js/shared/components/ol/ol-autocomplete.tsx
index 47773bcba2..93a822bf5f 100644
--- a/services/web/frontend/js/shared/components/ol/ol-autocomplete.tsx
+++ b/services/web/frontend/js/shared/components/ol/ol-autocomplete.tsx
@@ -34,6 +34,10 @@ export type OLAutocompleteProps = {
expandUp?: boolean
onClose?: () => void
isOpen?: boolean
+ scrollIntoView?: (
+ node: HTMLElement | null,
+ menuNode: HTMLElement | null
+ ) => void
}
type OLAutocompleteDisplayItem =
@@ -61,6 +65,7 @@ function OLAutocompleteInternal({
expandUp = false,
onClose,
isOpen: controlledIsOpen,
+ scrollIntoView,
}: OLAutocompleteProps) {
const { t } = useTranslation()
@@ -143,6 +148,7 @@ function OLAutocompleteInternal({
items: displayItems,
defaultHighlightedIndex: 0,
...(controlledIsOpen !== undefined && { isOpen: controlledIsOpen }),
+ ...(scrollIntoView !== undefined && { scrollIntoView }),
itemToString: item => {
if (!item) return ''
return item.type === 'create' ? item.inputValue : item.label
diff --git a/services/web/frontend/stylesheets/components/modal.scss b/services/web/frontend/stylesheets/components/modal.scss
index fcde021afb..785b48a7e9 100644
--- a/services/web/frontend/stylesheets/components/modal.scss
+++ b/services/web/frontend/stylesheets/components/modal.scss
@@ -33,6 +33,15 @@
}
}
+// OLModal wraps children in a FocusTrap that renders a
between
+// .modal-content and .modal-header/.modal-body/.modal-footer, breaking
+// Bootstrap's flex chain for scrollable modals. display: contents makes the
+// wrapper invisible to the layout engine so Bootstrap's flex/overflow chain
+// reaches .modal-body correctly.
+.modal-dialog-scrollable .modal-content > .focus-trap-container {
+ display: contents;
+}
+
.modal-content {
@include shadow-lg;