fix: improve mention autocomplete placement in task UI

This commit is contained in:
Nyk 2026-03-05 22:05:10 +07:00
parent 008bba4afb
commit f88d89fdc8
1 changed files with 16 additions and 1 deletions

View File

@ -137,6 +137,7 @@ function MentionTextarea({
const [activeIndex, setActiveIndex] = useState(0) const [activeIndex, setActiveIndex] = useState(0)
const [query, setQuery] = useState('') const [query, setQuery] = useState('')
const [range, setRange] = useState<{ start: number; end: number } | null>(null) const [range, setRange] = useState<{ start: number; end: number } | null>(null)
const [openUpwards, setOpenUpwards] = useState(false)
const filtered = mentionTargets const filtered = mentionTargets
.filter((target) => { .filter((target) => {
@ -178,6 +179,18 @@ function MentionTextarea({
}) })
} }
useEffect(() => {
if (!open) return
const node = textareaRef.current
if (!node) return
const rect = node.getBoundingClientRect()
const estimatedMenuHeight = Math.min(Math.max(filtered.length, 1) * 46 + 12, 224)
const availableBelow = window.innerHeight - rect.bottom
const availableAbove = rect.top
setOpenUpwards(availableBelow < estimatedMenuHeight && availableAbove > availableBelow)
}, [open, filtered.length])
return ( return (
<div className="relative"> <div className="relative">
<textarea <textarea
@ -217,7 +230,9 @@ function MentionTextarea({
className={className} className={className}
/> />
{open && filtered.length > 0 && ( {open && filtered.length > 0 && (
<div className="absolute z-[60] mt-1 w-full bg-surface-1 border border-border rounded-md shadow-xl max-h-56 overflow-y-auto"> <div className={`absolute z-[60] w-full bg-surface-1 border border-border rounded-md shadow-xl max-h-56 overflow-y-auto ${
openUpwards ? 'bottom-full mb-1' : 'mt-1'
}`}>
{filtered.map((option, index) => ( {filtered.map((option, index) => (
<button <button
key={`${option.type}-${option.handle}-${option.recipient}`} key={`${option.type}-${option.handle}-${option.recipient}`}