[codex] Fix new issue autocomplete pointer selection (#6311)

## Thinking Path

> - Paperclip orchestrates AI agents for zero-human companies.
> - Human operators create and edit issues through modal-heavy board UI
workflows.
> - The new-issue dialog embeds markdown editors that render
autocomplete menus through body-level portals.
> - Radix Dialog treats those portal clicks as outside-dialog pointer
events and prevents their default behavior.
> - That prevention made completion items hard or impossible to select
from inside the new-issue dialog.
> - This pull request marks the markdown editor floating autocomplete
menu as allowed dialog-external UI and extends the dialog
outside-pointer handler to preserve those interactions.
> - The benefit is that users can click/tap autocomplete completions
while keeping the existing modal behavior intact.

## What Changed

- Added a stable `data-paperclip-floating-ui` marker and explicit
pointer event handling to the markdown editor mention/autocomplete
portal.
- Updated the new issue dialog outside-pointer guard so editor
autocomplete portals are handled like Radix popover portals.
- Added regression coverage for markdown editor portal markup and new
issue dialog completion selection behavior.

## Verification

- `pnpm exec vitest run ui/src/components/MarkdownEditor.test.tsx
ui/src/components/NewIssueDialog.test.tsx` passed: 2 files, 38 tests.
- Confirmed the branch is rebased onto current `public-gh/master` before
opening this PR.
- Confirmed the diff does not include `pnpm-lock.yaml` or
`.github/workflows` changes.

## Risks

- Low risk. The change is scoped to allowing pointer events from known
body-level UI portals while keeping other outside-dialog pointer events
under Radix Dialog control.

> For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and
discuss it in `#dev` before opening the PR. Feature PRs that overlap
with planned core work may need to be redirected — check the roadmap
first. See `CONTRIBUTING.md`.

## Model Used

- OpenAI Codex, GPT-5 coding agent with repository tool use and local
command execution. Exact hosted context window is not surfaced in this
runtime.

## Checklist

- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] If this change affects the UI, I have included before/after
screenshots
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] I will address all Greptile and reviewer comments before
requesting merge

Screenshot note: this is an interaction/event-handling fix with no
visible UI change; verification is covered by the focused regression
tests above.

Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta 2026-05-18 14:28:49 -05:00 committed by GitHub
parent 988689947a
commit a07e6cef7b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 54 additions and 8 deletions

View file

@ -753,6 +753,19 @@ describe("MarkdownEditor", () => {
}); });
}); });
it("marks the autocomplete portal as floating UI for modal pointer handling", async () => {
const handleChange = vi.fn();
const { option, root } = await openMentionMenuFor(handleChange);
const menu = option.closest("[data-paperclip-floating-ui]");
expect(menu).toBeTruthy();
expect(menu?.className).toContain("pointer-events-auto");
await act(async () => {
root.unmount();
});
});
it("does not preventDefault on touchstart so the mention menu can scroll on mobile", async () => { it("does not preventDefault on touchstart so the mention menu can scroll on mobile", async () => {
const handleChange = vi.fn(); const handleChange = vi.fn();
const { option, root } = await openMentionMenuFor(handleChange); const { option, root } = await openMentionMenuFor(handleChange);

View file

@ -1241,7 +1241,8 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
{mentionActive && filteredMentions.length > 0 && mentionMenuPosition && {mentionActive && filteredMentions.length > 0 && mentionMenuPosition &&
createPortal( createPortal(
<div <div
className="fixed z-[9999] min-w-[180px] max-w-[calc(100vw-16px)] max-h-[208px] overflow-y-auto rounded-md border border-border bg-popover shadow-md" data-paperclip-floating-ui=""
className="pointer-events-auto fixed z-[9999] min-w-[180px] max-w-[calc(100vw-16px)] max-h-[208px] overflow-y-auto rounded-md border border-border bg-popover shadow-md"
style={{ style={{
top: mentionMenuPosition.top, top: mentionMenuPosition.top,
left: mentionMenuPosition.left, left: mentionMenuPosition.left,

View file

@ -13,6 +13,13 @@ const dialogState = vi.hoisted(() => ({
closeNewIssue: vi.fn(), closeNewIssue: vi.fn(),
})); }));
const dialogContentState = vi.hoisted(() => ({
onPointerDownOutside: null as null | ((event: {
detail: { originalEvent: { target: EventTarget | null } };
preventDefault: () => void;
}) => void),
}));
const companyState = vi.hoisted(() => ({ const companyState = vi.hoisted(() => ({
companies: [ companies: [
{ {
@ -186,13 +193,16 @@ vi.mock("@/components/ui/dialog", () => ({
children, children,
showCloseButton: _showCloseButton, showCloseButton: _showCloseButton,
onEscapeKeyDown: _onEscapeKeyDown, onEscapeKeyDown: _onEscapeKeyDown,
onPointerDownOutside: _onPointerDownOutside, onPointerDownOutside,
...props ...props
}: ComponentProps<"div"> & { }: ComponentProps<"div"> & {
showCloseButton?: boolean; showCloseButton?: boolean;
onEscapeKeyDown?: (event: unknown) => void; onEscapeKeyDown?: (event: unknown) => void;
onPointerDownOutside?: (event: unknown) => void; onPointerDownOutside?: (event: unknown) => void;
}) => <div {...props}>{children}</div>, }) => {
dialogContentState.onPointerDownOutside = onPointerDownOutside as typeof dialogContentState.onPointerDownOutside;
return <div {...props}>{children}</div>;
},
})); }));
vi.mock("@/components/ui/button", () => ({ vi.mock("@/components/ui/button", () => ({
@ -285,6 +295,7 @@ describe("NewIssueDialog", () => {
dialogState.newIssueOpen = true; dialogState.newIssueOpen = true;
dialogState.newIssueDefaults = {}; dialogState.newIssueDefaults = {};
dialogState.closeNewIssue.mockReset(); dialogState.closeNewIssue.mockReset();
dialogContentState.onPointerDownOutside = null;
toastState.pushToast.mockReset(); toastState.pushToast.mockReset();
mockIssuesApi.create.mockReset(); mockIssuesApi.create.mockReset();
mockIssuesApi.upsertDocument.mockReset(); mockIssuesApi.upsertDocument.mockReset();
@ -729,6 +740,27 @@ describe("NewIssueDialog", () => {
act(() => root.unmount()); act(() => root.unmount());
}); });
it("allows editor autocomplete portal pointer events inside the modal", async () => {
const { root } = renderDialog(container);
await flush();
const menu = document.createElement("div");
menu.setAttribute("data-paperclip-floating-ui", "");
const option = document.createElement("button");
menu.appendChild(option);
document.body.appendChild(menu);
const preventDefault = vi.fn();
dialogContentState.onPointerDownOutside?.({
detail: { originalEvent: { target: option } },
preventDefault,
});
expect(preventDefault).toHaveBeenCalledTimes(1);
act(() => root.unmount());
});
it("warns when a sub-issue stops matching the parent workspace", async () => { it("warns when a sub-issue stops matching the parent workspace", async () => {
mockProjectsApi.list.mockResolvedValue([ mockProjectsApi.list.mockResolvedValue([
{ {

View file

@ -1221,12 +1221,12 @@ export function NewIssueDialog() {
} }
// Radix Dialog's modal DismissableLayer calls preventDefault() on // Radix Dialog's modal DismissableLayer calls preventDefault() on
// pointerdown events that originate outside the Dialog DOM tree. // pointerdown events that originate outside the Dialog DOM tree.
// Popover portals render at the body level (outside the Dialog), so // Popover and editor autocomplete portals render at the body level
// touch events on popover content get their default prevented — which // (outside the Dialog), so touch/click events on their content get
// kills scroll gesture recognition on mobile. Telling Radix "this // their default prevented. Telling Radix "this event is handled" skips
// event is handled" skips that preventDefault, restoring touch scroll. // that preventDefault, restoring popover scroll and autocomplete taps.
const target = event.detail.originalEvent.target as HTMLElement | null; const target = event.detail.originalEvent.target as HTMLElement | null;
if (target?.closest("[data-radix-popper-content-wrapper]")) { if (target?.closest("[data-radix-popper-content-wrapper], [data-paperclip-floating-ui]")) {
event.preventDefault(); event.preventDefault();
} }
}} }}