Merge pull request #34565 from overleaf/em-bibtex-modal-scroll

Make BibTeX modals scrollable

GitOrigin-RevId: 3ef2d2e7ac5e481c0e31c937b62ff4467c23f220

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>

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

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;