mikkel/nexus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: render mention autocomplete via portal to prevent overflow clipping

Browse source 
The mention suggestion dropdown was getting clipped when typing at the
end of a long description inside modals/dialogs because parent containers
had overflow-y-auto. Render it via createPortal to document.body with
fixed positioning and z-index 9999 so it always appears above all UI.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta 2026-03-26 07:22:24 -05:00
parent c6364149b1
commit 0fd75aa579
1 changed files with 48 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
ui/src/components/MarkdownEditor.tsx
View file

@ -8,6 +8,7 @@ import {
useState, useState,
type DragEvent, type DragEvent,
} from "react"; } from "react";
import { createPortal } from "react-dom";
import { import {
CodeMirrorEditor, CodeMirrorEditor,
MDXEditor, MDXEditor,
@ -82,6 +83,9 @@ interface MentionState {
query: string; query: string;
top: number; top: number;
left: number; left: number;
/** Viewport-relative coords for portal positioning */
viewportTop: number;
viewportLeft: number;
textNode: Text; textNode: Text;
atPos: number; atPos: number;
endPos: number; endPos: number;
@ -155,6 +159,8 @@ function detectMention(container: HTMLElement): MentionState | null {
query, query,
top: rect.bottom - containerRect.top, top: rect.bottom - containerRect.top,
left: rect.left - containerRect.left, left: rect.left - containerRect.left,
viewportTop: rect.bottom,
viewportLeft: rect.left,
textNode: textNode as Text, textNode: textNode as Text,
atPos, atPos,
endPos: offset, endPos: offset,
@ -554,11 +560,12 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
plugins={plugins} plugins={plugins}
/> />
{/* Mention dropdown */} {/* Mention dropdown — rendered via portal so it isn't clipped by overflow containers */}
{mentionActive && filteredMentions.length > 0 && ( {mentionActive && filteredMentions.length > 0 &&
createPortal(
<div <div
className="absolute z-50 min-w-[180px] max-h-[200px] overflow-y-auto rounded-md border border-border bg-popover shadow-md" className="fixed z-[9999] min-w-[180px] max-h-[200px] overflow-y-auto rounded-md border border-border bg-popover shadow-md"
style={{ top: mentionState.top + 4, left: mentionState.left }} style={{ top: mentionState.viewportTop + 4, left: mentionState.viewportLeft }}
> >
{filteredMentions.map((option, i) => ( {filteredMentions.map((option, i) => (
<button <button
@ -592,7 +599,8 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
)} )}
</button> </button>
))} ))}
</div> </div>,
document.body,
)} )}
{isDragOver && canDropImage && ( {isDragOver && canDropImage && (