fix(web): don't enlarge on the Enter that commits an IME composition
Enter is also how a Japanese, Chinese or Korean input method commits the candidate being composed. That keystroke means "accept this word", not "new line", so the shortcut fired on every word such a user finished — enlarging the field and inserting a stray newline each time. Guard on event.nativeEvent.isComposing. The test pairs the composing case with a negative control dispatching the same event with the flag off, so a test that stopped reaching the handler cannot pass for the wrong reason. Signed-off-by: cliffhall <cliff@futurescale.com>
This commit is contained in:
parent
4c338a37e9
commit
f02a6161e4
2 changed files with 31 additions and 0 deletions
|
|
@ -2078,6 +2078,29 @@ describe("SchemaForm enlarge keyboard access (#2138)", () => {
|
||||||
expect(noteField().tagName).toBe("INPUT");
|
expect(noteField().tagName).toBe("INPUT");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Enter is also how an IME commits the candidate being composed, so acting on
|
||||||
|
// it there would enlarge the field and insert a newline every time a
|
||||||
|
// Japanese/Chinese/Korean user finished a word. userEvent has no composition
|
||||||
|
// mode, so the event is dispatched directly with the flag React reads.
|
||||||
|
it("ignores the Enter that commits an IME composition", () => {
|
||||||
|
renderWithMantine(<TwoStringHarness />);
|
||||||
|
|
||||||
|
fireEvent.keyDown(noteField(), { key: "Enter", isComposing: true });
|
||||||
|
|
||||||
|
expect(noteField().tagName).toBe("INPUT");
|
||||||
|
expect(noteField().value).toBe("");
|
||||||
|
});
|
||||||
|
|
||||||
|
// Same event without the flag, to prove the guard above is what turned it
|
||||||
|
// away rather than fireEvent simply not reaching the handler.
|
||||||
|
it("still enlarges on an Enter that is not composing", () => {
|
||||||
|
renderWithMantine(<TwoStringHarness />);
|
||||||
|
|
||||||
|
fireEvent.keyDown(noteField(), { key: "Enter", isComposing: false });
|
||||||
|
|
||||||
|
expect(noteField().tagName).toBe("TEXTAREA");
|
||||||
|
});
|
||||||
|
|
||||||
it("leaves the field alone for any other key", async () => {
|
it("leaves the field alone for any other key", async () => {
|
||||||
const user = userEvent.setup();
|
const user = userEvent.setup();
|
||||||
renderWithMantine(<TwoStringHarness />);
|
renderWithMantine(<TwoStringHarness />);
|
||||||
|
|
|
||||||
|
|
@ -758,8 +758,16 @@ export function SchemaForm({
|
||||||
// Ctrl/Cmd/Alt chords are deliberately left alone: those read as
|
// Ctrl/Cmd/Alt chords are deliberately left alone: those read as
|
||||||
// "submit" in a form, and a consumer binding one (run the tool)
|
// "submit" in a form, and a consumer binding one (run the tool)
|
||||||
// must not be overridden into enlarging a field instead.
|
// must not be overridden into enlarging a field instead.
|
||||||
|
//
|
||||||
|
// `isComposing` guards the IME case: Enter is also how a Japanese,
|
||||||
|
// Chinese or Korean input method commits the candidate being
|
||||||
|
// composed. That keystroke means "accept this word", not "new
|
||||||
|
// line", so acting on it would enlarge the field and insert a
|
||||||
|
// newline every time such a user finished a word — the shortcut
|
||||||
|
// would make the field unusable for them.
|
||||||
if (
|
if (
|
||||||
event.key !== "Enter" ||
|
event.key !== "Enter" ||
|
||||||
|
event.nativeEvent.isComposing ||
|
||||||
event.ctrlKey ||
|
event.ctrlKey ||
|
||||||
event.metaKey ||
|
event.metaKey ||
|
||||||
event.altKey
|
event.altKey
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue