From 8c9a80925e18e17df7419d3e0877da951b0c5297 Mon Sep 17 00:00:00 2001
From: Eric Mc Sween <5454374+emcsween@users.noreply.github.com>
Date: Fri, 12 Jun 2026 10:08:03 -0400
Subject: [PATCH] Merge pull request #34565 from
 overleaf/em-bibtex-modal-scroll

Make BibTeX modals scrollable

GitOrigin-RevId: 3ef2d2e7ac5e481c0e31c937b62ff4467c23f220
---
 .../web/frontend/js/shared/components/focus-trap.tsx     | 2 +-
 .../frontend/js/shared/components/ol/ol-autocomplete.tsx | 6 ++++++
 services/web/frontend/stylesheets/components/modal.scss  | 9 +++++++++
 3 files changed, 16 insertions(+), 1 deletion(-)

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,
       }}
     >
-      <div ref={containerRef} tabIndex={-1}>
+      <div ref={containerRef} className="focus-trap-container" tabIndex={-1}>
         {children}
       </div>
     </FocusTrapReact>
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 <div> 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;