feat(use-focus): adds focusWithin flag to useFocus hook

This adds an option to add onfocusin and onfocusout event handlers to the focus hook.

Author: dvcol

packages/floating-ui-svelte/src/hooks/use-focus.svelte.ts

@@ -11,6 +11,7 @@ import { isMac, isSafari } from "../internal/environment.js";
 import { isTypeableElement } from "../internal/is-typable-element.js";
 import type { OpenChangeReason } from "../types.js";
 import type { FloatingContext } from "./use-floating.svelte.js";
+import type { HTMLAttributes } from 'svelte/elements';
 
 interface UseFocusOptions {
 	/**
@@ -25,6 +26,12 @@ interface UseFocusOptions {
 	 * @default true
 	 */
 	visibleOnly?: boolean;
+	/**
+	 * Whether the open state should change when focusing within the trigger element.
+	 *
+	 * @default false
+	 */
+	focusWithin?: boolean;
 }
 
 function useFocus(context: FloatingContext, options: UseFocusOptions = {}) {
@@ -35,7 +42,7 @@ function useFocus(context: FloatingContext, options: UseFocusOptions = {}) {
 		elements: { reference, floating },
 	} = $derived(context);
 
-	const { enabled = true, visibleOnly = true } = $derived(options);
+	const { enabled = true, visibleOnly = true, focusWithin = false } = $derived(options);
 
 	let blockFocus = false;
 	let timeout = -1;
@@ -101,7 +108,7 @@ function useFocus(context: FloatingContext, options: UseFocusOptions = {}) {
 			if (!enabled) {
 				return {};
 			}
-			return {
+			const handlers: HTMLAttributes<HTMLElement>= {
 				onpointerdown: (event: PointerEvent) => {
 					if (isVirtualPointerEvent(event)) return;
 					keyboardModality = false;
@@ -173,7 +180,14 @@ function useFocus(context: FloatingContext, options: UseFocusOptions = {}) {
 						onOpenChange(false, event, "focus");
 					});
 				},
-			};
+			}
+
+			if (focusWithin) {
+				handlers.onfocusin = handlers.onfocus;
+				handlers.onfocusout = handlers.onblur;
+			}
+
+			return handlers;
 		},
 	};
 }

packages/floating-ui-svelte/test/hooks/use-focus.ts

@@ -2,6 +2,8 @@ import { fireEvent, render, screen } from "@testing-library/svelte";
 import { userEvent } from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import App from "./wrapper-components/use-focus.svelte";
+import { useFloating, useId, useFocus } from '../../src/index.js';
+import { withRunes } from '../internal/with-runes.svelte.js';
 
 /**
  * This test suite is skipped because `useFocus` heavily depends on the environment and JSDom can't deliver that environment (nor can happy-dom)
@@ -101,4 +103,40 @@ describe.skip("useFocus", () => {
 			expect(screen.queryByTestId("floating")).toBeInTheDocument();
 		});
 	});
+
+
 });
+
+describe("focusWithin", () => {
+	function createElements(): { reference: HTMLElement; floating: HTMLElement } {
+		const reference = document.createElement("div");
+		const floating = document.createElement("div");
+		reference.id = useId();
+		floating.id = useId();
+		return { reference, floating };
+	}
+
+	it("Should not output onfocusin or onfocusout event handlers", withRunes( () => {
+		expect.assertions(2);
+
+		const elements = createElements();
+		const floating = useFloating({ elements });
+		const focus = useFocus(floating.context);
+		const handlers = focus.reference;
+
+		expect(handlers).not.toHaveProperty("onfocusin");
+		expect(handlers).not.toHaveProperty("onfocusout");
+	}))
+
+	it("Should output onfocusin or onfocusout event handlers", withRunes( () => {
+		expect.assertions(2);
+
+		const elements = createElements();
+		const floating = useFloating({ elements });
+		const focus = useFocus(floating.context, { focusWithin: true });
+		const handlers = focus.reference;
+
+		expect(handlers).toHaveProperty("onfocusin");
+		expect(handlers).toHaveProperty("onfocusout");
+	}))
+})