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())
+ )
})
})