fix(contact-list): resolves an issue where website label was uneditable

packages/ui/src/components/input-group.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, test } from "vitest";
+import { createPortal } from "react-dom";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group";
+
+function PortaledInput() {
+	return createPortal(<input aria-label="Portaled input" />, document.body);
+}
+
+describe("InputGroupAddon", () => {
+	test("does not redirect focus from controls rendered through a portal", async () => {
+		const user = userEvent.setup();
+
+		render(
+			<InputGroup>
+				<InputGroupAddon align="inline-end">
+					<span>Addon</span>
+					<PortaledInput />
+				</InputGroupAddon>
+
+				<InputGroupInput aria-label="Outer input" />
+			</InputGroup>,
+		);
+
+		const portaledInput = screen.getByLabelText("Portaled input");
+		const outerInput = screen.getByLabelText("Outer input");
+
+		await user.click(portaledInput);
+
+		expect(document.activeElement).toBe(portaledInput);
+		expect(document.activeElement).not.toBe(outerInput);
+	});
+});

packages/ui/src/components/input-group.tsx

@@ -48,6 +48,7 @@ function InputGroupAddon({
 			data-slot="input-group-addon"
 			className={cn(inputGroupAddonVariants({ align }), className)}
 			onKeyDown={(e) => {
+				if (!(e.target instanceof Element) || !e.currentTarget.contains(e.target)) return;
 				// Only respond to Space or Enter
 				if (e.key !== " " && e.key !== "Enter") return;
 				if (!(e.target as HTMLElement).closest("button")) {
@@ -56,6 +57,7 @@ function InputGroupAddon({
 				}
 			}}
 			onClick={(e) => {
+				if (!(e.target instanceof Element) || !e.currentTarget.contains(e.target)) return;
 				if (!(e.target as HTMLElement).closest("button")) {
 					e.preventDefault();
 					e.currentTarget.parentElement?.querySelector("input")?.focus();