diff --git a/assets/src/components/inputModal.tsx b/assets/src/components/inputModal.tsx index 5c2eb410f..89e3aeed2 100644 --- a/assets/src/components/inputModal.tsx +++ b/assets/src/components/inputModal.tsx @@ -1,6 +1,7 @@ import React, { useContext } from "react" import { StateDispatchContext } from "../contexts/stateDispatchContext" import { closeInputModal } from "../state" +import { Modal } from "@restart/ui" const InputModal = ({ children, @@ -9,22 +10,18 @@ const InputModal = ({ }) => { const [, dispatch] = useContext(StateDispatchContext) return ( - <> -
-
{ - if (event.key === "Escape") { - dispatch(closeInputModal()) - } - }} - > - {children} -
-
-
- + { + dispatch(closeInputModal()) + }} + show + renderBackdrop={(props) => ( +
+ )} + > + <>{children} + ) } diff --git a/assets/tests/components/inputModal.test.tsx b/assets/tests/components/inputModal.test.tsx index 320b04ca4..e7a68dae7 100644 --- a/assets/tests/components/inputModal.test.tsx +++ b/assets/tests/components/inputModal.test.tsx @@ -1,24 +1,25 @@ import { jest, describe, test, expect } from "@jest/globals" import React from "react" -import { render, fireEvent } from "@testing-library/react" +import { render, waitFor } from "@testing-library/react" import InputModal from "../../src/components/inputModal" import { StateDispatchProvider } from "../../src/contexts/stateDispatchContext" import { initialState, closeInputModal } from "../../src/state" +import userEvent from "@testing-library/user-event" describe("InputModal", () => { - test("can be dismissed with escape key", () => { + test("can be dismissed with escape key", async () => { const mockDispatch = jest.fn() - const result = render( + render( <>Hello, world! ) - - fireEvent.keyDown(result.getByText("Hello, world!"), { key: "Escape" }) - - expect(mockDispatch).toHaveBeenCalledWith(closeInputModal()) + await userEvent.keyboard("{Escape}") + await waitFor(() => + expect(mockDispatch).toHaveBeenCalledWith(closeInputModal()) + ) }) })