Prevent event default when pressing enter with open AutoComplete

[carlgieringer]

Fixes https://github.com/mlaursen/react-md/issues/194.

Note this commit is based on v2.9.1 because that is where I wanted to apply the fix. Please let me know the preferred approach to submitting fixes to multiple versions.

Codesandbox for reproducing the issue: https://codesandbox.io/s/react-md-autocomplete-submits-form-4hstxo?file=/src/App.tsx

I looked into adding a test, and the following passes, but it doesn't fail before the change, presumably because the fake DOM doesn't properly implement the submit event behavior (https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event).

  it("should not submit a form when the enter key selects an autocomplete item", async () => {
    const onSubmit = jest.fn();
    const { getByRole } = render(
      <form onSubmit={onSubmit}>
        <AutoComplete {...PROPS} />
      </form>
    );
    const input = getById<HTMLInputElement>("autocomplete");
    const getListbox = () => getByRole("listbox");

    fireEvent.keyDown(input, { key: "ArrowDown", altKey: true });
    fireEvent.keyDown(input, { key: "ArrowDown" });
    expect(input).toHaveAttribute(
      "aria-activedescendant",
      "autocomplete-listbox-result-1"
    );

    fireEvent.keyDown(input, { key: "Enter" });
    await waitForElementToBeRemoved(getListbox);
    expect(input.value).toBe("Alabama");

    expect(onSubmit).not.toHaveBeenCalled();
  });

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-md	❌ Failed (Inspect)			Apr 18, 2023 4:53am

[mlaursen]

Hey @carlgieringer, sorry for the late response. I hadn't planned on supporting multiple versions of react-md, but I went ahead and created the following branches:

• support/v2
• support/v3
• support/v4
• support/v5

I'll use these branches for bugfixes from the community like this one. I've also updated this PR to go into support/v2, but feel free to change the target. I'll merge this one and trigger a release within the next few days.

[carlgieringer]

Great thanks! I think the issue applies to all versions v2–5.

BTW: I had a question in Slack about using TextArea with AutoCompletes. I'm happy to write up an issue discussing the feature request, but I didn't want to spend a lot of time on a PR if it wasn't something you were interested in merging.

[mlaursen]

Sorry for the delay. I responded in Slack as well, but here's a followup:

Ohh, I hadn't thought about that use-case when I ended up separating the TextField and TextArea components in v2.

I'm planning on implementing the AutoComplete as a hook in v6 which will allow for this behavior back, but I'd be fine with a PR to add this functionality back until then.

I'll research a bit to see if there are any accessibility concerns when using a textarea instead of an input for this sort of widget and add a new use-case/example for v6.

[mlaursen]

This bugfix has been applied and published as:

• 2.9.2
• 3.1.2
• 4.0.4
• 5.1.5 (latest)