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;