hanh.tonguyen/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): fix mobile popover issues in InlineEntitySelector

Browse Source 
Force popover to always open downward (side="bottom") to prevent it from
flipping upward and going off-screen on mobile. Skip auto-focusing the
search input on touch devices so the virtual keyboard doesn't open and
reshape the viewport. Add touch-manipulation on option buttons to remove
tap delays and improve scroll gesture recognition.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dotta
2026-03-05 17:23:01 -06:00
parent e401979851
commit 5134cac993
1 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
ui/src/components/InlineEntitySelector.tsx
View File

@@ -106,11 +106,18 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
</PopoverTrigger> </PopoverTrigger>
<PopoverContent <PopoverContent
align="start" align="start"
side="bottom"
collisionPadding={16} collisionPadding={16}
className="w-[min(20rem,calc(100vw-2rem))] p-1" className="w-[min(20rem,calc(100vw-2rem))] p-1"
onOpenAutoFocus={(event) => { onOpenAutoFocus={(event) => {
event.preventDefault(); event.preventDefault();
// On touch devices, don't auto-focus the search input to avoid
// opening the virtual keyboard which reshapes the viewport and
// pushes the popover off-screen.
const isTouch = window.matchMedia("(pointer: coarse)").matches;
if (!isTouch) {
inputRef.current?.focus(); inputRef.current?.focus();
}
}} }}
onCloseAutoFocus={(event) => { onCloseAutoFocus={(event) => {
if (!shouldPreventCloseAutoFocusRef.current) return; if (!shouldPreventCloseAutoFocusRef.current) return;
@@ -170,7 +177,7 @@ export const InlineEntitySelector = forwardRef<HTMLButtonElement, InlineEntitySe
key={option.id || "__none__"} key={option.id || "__none__"}
type="button" type="button"
className={cn( className={cn(
"flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm", "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm touch-manipulation",
isHighlighted && "bg-accent", isHighlighted && "bg-accent",
)} )}
onMouseEnter={() => setHighlightedIndex(index)} onMouseEnter={() => setHighlightedIndex(index)}