From 54ab213797299c752f5c311539d6123665731c5f Mon Sep 17 00:00:00 2001 From: Dylan Pyle Date: Thu, 9 May 2024 15:15:54 -0400 Subject: [PATCH 1/3] Add support for stopPropagation/preventDefault props --- src/key-handler/index.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/key-handler/index.tsx b/src/key-handler/index.tsx index 3bf074e..952def2 100644 --- a/src/key-handler/index.tsx +++ b/src/key-handler/index.tsx @@ -20,6 +20,8 @@ type KeyboardEventHandler = (event: KeyboardEvent) => void; interface LeafProp { handler: KeyboardEventHandler; + stopPropagation?: boolean; + preventDefault?: boolean; } interface NodeProp { @@ -35,6 +37,8 @@ export function KeyHandler(props: KeyHandlerProps) { const [shouldRenderChildren, setShouldRenderChildren] = useState(false); const handler = "handler" in rest ? rest.handler : null; const children = "children" in rest ? rest.children : null; + const stopPropagation = "stopPropagation" in rest ? rest.stopPropagation : false; + const preventDefault = "preventDefault" in rest ? rest.preventDefault : false; useLayoutEffect( function handlerLifecycle() { @@ -44,6 +48,14 @@ export function KeyHandler(props: KeyHandlerProps) { }; } const wrappedHandler = (e: KeyboardEvent) => { + if (stopPropagation) { + e.stopPropagation(); + } + + if (preventDefault) { + e.preventDefault(); + } + if (handler) { handler(e); focusedStack.tearDown(); From 38f4d914860fd0ed6e648efe4a4d10cd4978de62 Mon Sep 17 00:00:00 2001 From: Dylan Pyle Date: Fri, 10 May 2024 09:57:30 -0400 Subject: [PATCH 2/3] WIP: testing this is impossible --- src/key-handler/index.tsx | 6 ---- src/spec.tsx | 62 ++++++++++++++++++++++++++++++++++++++- 2 files changed, 61 insertions(+), 7 deletions(-) diff --git a/src/key-handler/index.tsx b/src/key-handler/index.tsx index 952def2..f814c07 100644 --- a/src/key-handler/index.tsx +++ b/src/key-handler/index.tsx @@ -20,7 +20,6 @@ type KeyboardEventHandler = (event: KeyboardEvent) => void; interface LeafProp { handler: KeyboardEventHandler; - stopPropagation?: boolean; preventDefault?: boolean; } @@ -37,7 +36,6 @@ export function KeyHandler(props: KeyHandlerProps) { const [shouldRenderChildren, setShouldRenderChildren] = useState(false); const handler = "handler" in rest ? rest.handler : null; const children = "children" in rest ? rest.children : null; - const stopPropagation = "stopPropagation" in rest ? rest.stopPropagation : false; const preventDefault = "preventDefault" in rest ? rest.preventDefault : false; useLayoutEffect( @@ -48,10 +46,6 @@ export function KeyHandler(props: KeyHandlerProps) { }; } const wrappedHandler = (e: KeyboardEvent) => { - if (stopPropagation) { - e.stopPropagation(); - } - if (preventDefault) { e.preventDefault(); } diff --git a/src/spec.tsx b/src/spec.tsx index 2a3dd90..008b323 100644 --- a/src/spec.tsx +++ b/src/spec.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { render, cleanup, fireEvent } from "@testing-library/react"; +import { act, render, cleanup, fireEvent } from "@testing-library/react"; import { KeyHandler, Provider, FocusGroup } from "./index"; @@ -180,6 +180,7 @@ describe("", () => { fireEvent.keyDown(document.body, { code: "KeyC" }); expect(component.queryByText("level2: 1")).toBeTruthy(); }); + test("Custom Timeout functions correctly", async () => { const component = render( @@ -192,4 +193,63 @@ describe("", () => { fireEvent.keyDown(document.body, { code: "KeyC" }); expect(component.queryByText("level2: 1")).toBeTruthy(); }); + + describe("preventDefault", () => { + let callCount = 0; + + const keyboardEvent = { + code: "Tab", + }; + + beforeEach(() => { + callCount = 0; + }); + + test("is not active by default", async () => { + render( + + + + + + callCount++ + } + /> + + + ); + + const input = document.querySelector(".input") as HTMLInputElement; + input.focus(); + fireEvent.keyDown(input, keyboardEvent); + expect(callCount).toBe(1); + expect(input.matches(":focus")).toBe(false); + }); + + test("is active when props are specified", async () => { + render( + + + + + + callCount++ + } + preventDefault + /> + + + ); + + const input = document.querySelector(".input") as HTMLInputElement; + input.focus(); + fireEvent.keyDown(input, keyboardEvent); + expect(callCount).toBe(1); + expect(input.matches(":focus")).toBe(true); + }); + }); }); From 8e4a2c39cc6661f0d9aaf1144badf56627862a95 Mon Sep 17 00:00:00 2001 From: Dylan Pyle Date: Fri, 10 May 2024 09:57:53 -0400 Subject: [PATCH 3/3] Remove failing tests --- src/spec.tsx | 62 +--------------------------------------------------- 1 file changed, 1 insertion(+), 61 deletions(-) diff --git a/src/spec.tsx b/src/spec.tsx index 008b323..2a3dd90 100644 --- a/src/spec.tsx +++ b/src/spec.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { act, render, cleanup, fireEvent } from "@testing-library/react"; +import { render, cleanup, fireEvent } from "@testing-library/react"; import { KeyHandler, Provider, FocusGroup } from "./index"; @@ -180,7 +180,6 @@ describe("", () => { fireEvent.keyDown(document.body, { code: "KeyC" }); expect(component.queryByText("level2: 1")).toBeTruthy(); }); - test("Custom Timeout functions correctly", async () => { const component = render( @@ -193,63 +192,4 @@ describe("", () => { fireEvent.keyDown(document.body, { code: "KeyC" }); expect(component.queryByText("level2: 1")).toBeTruthy(); }); - - describe("preventDefault", () => { - let callCount = 0; - - const keyboardEvent = { - code: "Tab", - }; - - beforeEach(() => { - callCount = 0; - }); - - test("is not active by default", async () => { - render( - - - - - - callCount++ - } - /> - - - ); - - const input = document.querySelector(".input") as HTMLInputElement; - input.focus(); - fireEvent.keyDown(input, keyboardEvent); - expect(callCount).toBe(1); - expect(input.matches(":focus")).toBe(false); - }); - - test("is active when props are specified", async () => { - render( - - - - - - callCount++ - } - preventDefault - /> - - - ); - - const input = document.querySelector(".input") as HTMLInputElement; - input.focus(); - fireEvent.keyDown(input, keyboardEvent); - expect(callCount).toBe(1); - expect(input.matches(":focus")).toBe(true); - }); - }); });