number input does not trigger form submit on hitting enter

[taksuparth]

• @testing-library/react version: 13.4.0
• Testing Framework and version: jest version 29.1.1
• DOM Environment: 29.1.1

Relevant code or config:

My form component

import "./styles.css";
import { ReactElement, HTMLInputTypeAttribute } from "react";

export type Props = {
  onChange?: (e: any) => void;
  onSubmit?: (e: any) => void;
  inputType?: HTMLInputTypeAttribute;
};

export default function App({
  onChange,
  onSubmit,
  inputType
}: Props): ReactElement {
  return (
    <form className="App" onSubmit={onSubmit}>
      <input type={inputType} onChange={onChange} data-testid="input" />
    </form>
  );
}

and my test cases

import App from "./App";
import { render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

describe("test app", () => {
  test("submits form for text input", async () => {
    const onSubmit = jest.fn();

    const { getByTestId } = render(
      <App onSubmit={onSubmit} inputType="text" />
    );
    const inputEl = getByTestId("input");
    await userEvent.type(inputEl, "[Enter]");

    expect(onSubmit.mock.calls.length).toBe(1);
  });

  test("submits form for number type input", async () => {
    const onSubmit = jest.fn();

    const { getByTestId } = render(
      <App onSubmit={onSubmit} inputType="number" />
    );
    const inputEl = getByTestId("input");
    await userEvent.type(inputEl, "[Enter]");

    expect(onSubmit.mock.calls.length).toBe(1);
  });
});

1st test case is success, but 2nd fails.

What you did:

I was testing a form that had onSubmit method and a single input as a child. On triggering enter for text input gets form submitted but it does not work in the same way for from type number

What happened:

form's onSubmit function does not get called

Reproduction:

https://codesandbox.io/s/react-testing-library-number-input-submit-5zpsvm

Problem description:

• Form's onSubmit method does not get invoked when number input gets enter keypress

[ph-fritsche]

Thanks for the report. I think number input is missing here: https://github.com/testing-library/user-event/blob/1aa2027e5ec445ab413808556efa7763b65053d3/src/event/behavior/keypress.ts#L59-L68

[teobmg]

This is happening to me too. @taksuparth did you find any workaround?

@ph-fritsche do you know when it will be resolved?

[LucsSants]

This is happening to me too. @taksuparth did you find any workaround?

@ph-fritsche do you know when it will be resolved?

Use fireEvent.submit()!