Skip to content

fix(input-group): ignore portaled descendant events #833

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
songkeys wants to merge 1 commit into
base: main
Choose a base branch
from
+123 −3
Open

fix(input-group): ignore portaled descendant events #833

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/ui/public/r/input-group.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"files": [
{
"path": "registry/default/ui/input-group.tsx",
"content": "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input, type InputProps } from \"@/registry/default/ui/input\";\nimport { Textarea, type TextareaProps } from \"@/registry/default/ui/textarea\";\n\nconst inputGroupAddonVariants = cva(\n \"flex h-auto cursor-text select-none items-center justify-center gap-2 [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80\",\n {\n defaultVariants: {\n align: \"inline-start\",\n },\n variants: {\n align: {\n \"block-end\":\n \"order-last w-full justify-start px-[calc(--spacing(3)-1px)] pb-[calc(--spacing(3)-1px)] [.border-t]:pt-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n \"block-start\":\n \"order-first w-full justify-start px-[calc(--spacing(3)-1px)] pt-[calc(--spacing(3)-1px)] [.border-b]:pb-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n \"inline-end\":\n \"order-last pe-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-me-1.5 has-[>button]:-me-2 has-[>kbd:last-child]:me-[-0.35rem] [[data-size=sm]+&]:pe-[calc(--spacing(2.5)-1px)]\",\n \"inline-start\":\n \"order-first ps-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-ms-1.5 has-[>button]:-ms-2 has-[>kbd:last-child]:ms-[-0.35rem] [[data-size=sm]+&]:ps-[calc(--spacing(2.5)-1px)]\",\n },\n },\n },\n);\n\nexport function InputGroup({\n className,\n ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n return (\n <div\n className={cn(\n \"relative inline-flex w-full min-w-0 items-center rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 has-[textarea]:h-auto has-data-[align=block-end]:h-auto has-data-[align=block-start]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:flex-col has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-autofill:bg-foreground/4 has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto has-data-[align=inline-start]:**:[input]:ps-2 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5 **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)]\",\n className,\n )}\n data-slot=\"input-group\"\n role=\"group\"\n {...props}\n />\n );\n}\n\nexport function InputGroupAddon({\n className,\n align = \"inline-start\",\n ...props\n}: React.ComponentProps<\"div\"> &\n VariantProps<typeof inputGroupAddonVariants>): React.ReactElement {\n return (\n <div\n className={cn(inputGroupAddonVariants({ align }), className)}\n data-align={align}\n data-slot=\"input-group-addon\"\n onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {\n const target = e.target as HTMLElement;\n const isInteractive = target.closest(\n \"button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']\",\n );\n if (isInteractive) return;\n e.preventDefault();\n const parent = e.currentTarget.parentElement;\n const input = parent?.querySelector<\n HTMLInputElement | HTMLTextAreaElement\n >(\"input, textarea\");\n if (input && !parent?.querySelector(\"input:focus, textarea:focus\")) {\n input.focus();\n }\n }}\n {...props}\n />\n );\n}\n\nexport function InputGroupText({\n className,\n ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n return (\n <span\n className={cn(\n \"flex items-center gap-2 truncate text-muted-foreground in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport function InputGroupInput({\n className,\n ...props\n}: InputProps): React.ReactElement {\n return <Input className={className} unstyled {...props} />;\n}\n\nexport function InputGroupTextarea({\n className,\n ...props\n}: TextareaProps): React.ReactElement {\n return <Textarea className={className} unstyled {...props} />;\n}\n",
"content": "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input, type InputProps } from \"@/registry/default/ui/input\";\nimport { Textarea, type TextareaProps } from \"@/registry/default/ui/textarea\";\n\nconst inputGroupAddonVariants = cva(\n \"flex h-auto cursor-text select-none items-center justify-center gap-2 [&>kbd]:rounded-[calc(var(--radius)-5px)] in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80\",\n {\n defaultVariants: {\n align: \"inline-start\",\n },\n variants: {\n align: {\n \"block-end\":\n \"order-last w-full justify-start px-[calc(--spacing(3)-1px)] pb-[calc(--spacing(3)-1px)] [.border-t]:pt-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n \"block-start\":\n \"order-first w-full justify-start px-[calc(--spacing(3)-1px)] pt-[calc(--spacing(3)-1px)] [.border-b]:pb-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]\",\n \"inline-end\":\n \"order-last pe-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-me-1.5 has-[>button]:-me-2 has-[>kbd:last-child]:me-[-0.35rem] [[data-size=sm]+&]:pe-[calc(--spacing(2.5)-1px)]\",\n \"inline-start\":\n \"order-first ps-[calc(--spacing(3)-1px)] has-[>:last-child[data-slot=badge]]:-ms-1.5 has-[>button]:-ms-2 has-[>kbd:last-child]:ms-[-0.35rem] [[data-size=sm]+&]:ps-[calc(--spacing(2.5)-1px)]\",\n },\n },\n },\n);\n\nexport function InputGroup({\n className,\n ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n return (\n <div\n className={cn(\n \"relative inline-flex w-full min-w-0 items-center rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 has-[textarea]:h-auto has-data-[align=block-end]:h-auto has-data-[align=block-start]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:flex-col has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-autofill:bg-foreground/4 has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] sm:text-sm dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto has-data-[align=inline-start]:**:[input]:ps-2 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5 **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)]\",\n className,\n )}\n data-slot=\"input-group\"\n role=\"group\"\n {...props}\n />\n );\n}\n\nexport function InputGroupAddon({\n className,\n align = \"inline-start\",\n ...props\n}: React.ComponentProps<\"div\"> &\n VariantProps<typeof inputGroupAddonVariants>): React.ReactElement {\n return (\n <div\n className={cn(inputGroupAddonVariants({ align }), className)}\n data-align={align}\n data-slot=\"input-group-addon\"\n onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {\n const target = e.target as Element;\n if (!e.currentTarget.contains(target)) return;\n\n const isInteractive = target.closest(\n \"button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']\",\n );\n if (isInteractive) return;\n e.preventDefault();\n const parent = e.currentTarget.parentElement;\n const input = parent?.querySelector<\n HTMLInputElement | HTMLTextAreaElement\n >(\"input, textarea\");\n if (input && !parent?.querySelector(\"input:focus, textarea:focus\")) {\n input.focus();\n }\n }}\n {...props}\n />\n );\n}\n\nexport function InputGroupText({\n className,\n ...props\n}: React.ComponentProps<\"span\">): React.ReactElement {\n return (\n <span\n className={cn(\n \"flex items-center gap-2 truncate text-muted-foreground in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport function InputGroupInput({\n className,\n ...props\n}: InputProps): React.ReactElement {\n return <Input className={className} unstyled {...props} />;\n}\n\nexport function InputGroupTextarea({\n className,\n ...props\n}: TextareaProps): React.ReactElement {\n return <Textarea className={className} unstyled {...props} />;\n}\n",
"type": "registry:ui"
}
],
Expand Down
4 changes: 3 additions & 1 deletion apps/ui/registry/default/ui/input-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,9 @@ export function InputGroupAddon({
data-align={align}
data-slot="input-group-addon"
onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {
const target = e.target as HTMLElement;
const target = e.target as Element;
if (!e.currentTarget.contains(target)) return;

const isInteractive = target.closest(
"button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']",
);
Expand Down
4 changes: 3 additions & 1 deletion packages/ui/src/components/input-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,9 @@ export function InputGroupAddon({
data-align={align}
data-slot="input-group-addon"
onMouseDown={(e: React.MouseEvent<HTMLDivElement>) => {
const target = e.target as HTMLElement;
const target = e.target as Element;
if (!e.currentTarget.contains(target)) return;

const isInteractive = target.closest(
"button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']",
);
Expand Down
116 changes: 116 additions & 0 deletions packages/ui/test/components/input-group.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
import { describe, expect, mock, test } from "bun:test";
import type * as React from "react";

function componentMock() {
return null;
}

mock.module("@coss/ui/components/input", () => ({
Input: componentMock,
}));

mock.module("@coss/ui/components/textarea", () => ({
Textarea: componentMock,
}));

mock.module("@coss/ui/lib/utils", () => ({
cn: (...inputs: unknown[]) => inputs.filter(Boolean).join(" "),
}));

const { InputGroupAddon } = await import("../../src/components/input-group");

type MouseDownHandler = NonNullable<React.ComponentProps<"div">["onMouseDown"]>;

function getMouseDownHandler(): MouseDownHandler {
const element = InputGroupAddon({});
const props = element.props as React.ComponentProps<"div">;

if (!props.onMouseDown) {
throw new Error("InputGroupAddon does not have an onMouseDown handler");
}

return props.onMouseDown;
}

function createMouseDownEvent({
contains,
interactive = false,
}: {
contains: boolean;
interactive?: boolean;
}) {
let focused = false;
let prevented = false;

const target = {
closest: () => (interactive ? {} : null),
} as unknown as Element;
const input = {
focus: () => {
focused = true;
},
};
const parentElement = {
querySelector: (selector: string) => {
if (selector === "input, textarea") return input;
if (selector === "input:focus, textarea:focus") return null;
return null;
},
};
const currentTarget = {
contains: () => contains,
parentElement,
} as unknown as HTMLDivElement;
const event = {
currentTarget,
preventDefault: () => {
prevented = true;
},
target,
} as unknown as React.MouseEvent<HTMLDivElement>;

return {
event,
wasFocused: () => focused,
wasPrevented: () => prevented,
};
}

describe("InputGroupAddon", () => {
test("focuses the input for non-interactive content inside the addon", () => {
const handler = getMouseDownHandler();
const { event, wasFocused, wasPrevented } = createMouseDownEvent({
contains: true,
});

handler(event);

expect(wasPrevented()).toBe(true);
expect(wasFocused()).toBe(true);
});

test("does not focus the input for interactive content inside the addon", () => {
const handler = getMouseDownHandler();
const { event, wasFocused, wasPrevented } = createMouseDownEvent({
contains: true,
interactive: true,
});

handler(event);

expect(wasPrevented()).toBe(false);
expect(wasFocused()).toBe(false);
});

test("ignores events from portaled descendants outside the addon", () => {
const handler = getMouseDownHandler();
const { event, wasFocused, wasPrevented } = createMouseDownEvent({
contains: false,
});

handler(event);

expect(wasPrevented()).toBe(false);
expect(wasFocused()).toBe(false);
});
});
Loading