diff --git a/apps/web/src/components/preview/PreviewChromeRow.composition.browser.test.tsx b/apps/web/src/components/preview/PreviewChromeRow.composition.browser.test.tsx new file mode 100644 index 0000000000000..c307a46f0a660 --- /dev/null +++ b/apps/web/src/components/preview/PreviewChromeRow.composition.browser.test.tsx @@ -0,0 +1,43 @@ +import { createRef } from "react"; +import { expect, it, vi } from "vite-plus/test"; +import { page, userEvent } from "vite-plus/test/browser"; + +import { act, render } from "../../../test/render"; +import { PreviewChromeRow } from "./PreviewChromeRow"; + +it("ignores composing keys in the address bar", async () => { + const onSubmit = vi.fn(); + await using _screen = await render( + {}} + onForward={() => {}} + onRefresh={() => {}} + onSubmit={onSubmit} + />, + ); + const input = page.getByRole("textbox", { name: "Search or enter URL" }); + await input.fill("東京"); + + for (const composition of [ + { key: "Enter", isComposing: true, keyCode: 13 }, + { key: "Enter", isComposing: false, keyCode: 229 }, + { key: "Escape", isComposing: true, keyCode: 27 }, + { key: "Escape", isComposing: false, keyCode: 229 }, + ]) { + const event = new KeyboardEvent("keydown", { ...composition, bubbles: true, cancelable: true }); + await act(() => input.element().dispatchEvent(event)); + if (composition.key === "Enter") expect(event.defaultPrevented).toBe(true); + await expect.element(input).toHaveValue("東京"); + await expect.element(input).toHaveFocus(); + } + expect(onSubmit).not.toHaveBeenCalled(); + + await userEvent.keyboard("{Enter}"); + expect(onSubmit).toHaveBeenCalledExactlyOnceWith("東京"); +}); diff --git a/apps/web/src/components/preview/PreviewChromeRow.tsx b/apps/web/src/components/preview/PreviewChromeRow.tsx index d8202a4064e1e..4faf9e5c0f94e 100644 --- a/apps/web/src/components/preview/PreviewChromeRow.tsx +++ b/apps/web/src/components/preview/PreviewChromeRow.tsx @@ -167,6 +167,10 @@ export function PreviewChromeRow({ setInputFocused(false); }} onKeyDown={(event) => { + if (event.nativeEvent.isComposing || event.keyCode === 229) { + if (event.key === "Enter") event.preventDefault(); + return; + } if (event.key === "Enter") submit(event); if (event.key === "Escape") { event.preventDefault();