Merge branch 'main' into feat/increase-test-coverage

# Conflicts:
#	packages/ui/src/components/input-group.test.tsx

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

@@ -1,5 +1,7 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, test } from "vitest";
+import { createPortal } from "react-dom";
 import {
 	InputGroup,
 	InputGroupAddon,
@@ -9,6 +11,10 @@ import {
 	InputGroupTextarea,
 } from "./input-group";
 
+function PortaledInput() {
+	return createPortal(<input aria-label="Portaled input" />, document.body);
+}
+
 describe("InputGroup", () => {
 	it("renders a fieldset with data-slot='input-group'", () => {
 		render(<InputGroup data-testid="g" />);
@@ -90,6 +96,29 @@ describe("InputGroupAddon", () => {
 		fireEvent.keyDown(addon, { key: "a" });
 		expect(document.activeElement).not.toBe(screen.getByTestId("i"));
 	});
+
+	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);
+	});
 });
 
 describe("InputGroupButton", () => {

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();