diff --git a/premiser-ui/README.md b/premiser-ui/README.md index 2623966c..2d3b4802 100644 --- a/premiser-ui/README.md +++ b/premiser-ui/README.md @@ -38,10 +38,13 @@ This workspace currently depends on a branch in a fork of react-md. This fork: [this comment](https://github.com/Howdju/howdju/issues/304#issuecomment-1511515470).) - upgrades the repo to Yarn berry so that I can add it (command below) +Ater making changes there, must run `yarn run setup` and then `git push --force` to update the +branch. Get the git commit hash like `git rev-parse HEAD`. + The steps to add this dependency are to run this command: ```sh -yarn add '@react-md/autocomplete@Howdju/react-md#workspace=@react-md/autocomplete&commit=c5bb05609126221985da30395a71cfdebd9d07d9' +yarn add '@react-md/autocomplete@Howdju/react-md#workspace=@react-md/autocomplete&commit=739fcf8b359727d958d6befe46014fe8b3dfe11c' ``` And then manually to edit the `yarn.lock` entry for @react-md/autocomplete to point @react-md/form @@ -50,5 +53,5 @@ to the same version: ```diff dependencies: - "@react-md/form": ^2.9.1 -+ "@react-md/form": https://github.com/Howdju/react-md.git#workspace=%40react-md%2Fform&commit=c5bb05609126221985da30395a71cfdebd9d07d9 ++ "@react-md/form": https://github.com/Howdju/react-md.git#workspace=%40react-md%2Fform&commit=739fcf8b359727d958d6befe46014fe8b3dfe11c ``` diff --git a/premiser-ui/package.json b/premiser-ui/package.json index b8c87885..1253bac8 100644 --- a/premiser-ui/package.json +++ b/premiser-ui/package.json @@ -112,7 +112,7 @@ }, "dependencies": { "@grrr/cookie-consent": "^1.0.4", - "@react-md/autocomplete": "Howdju/react-md#workspace=@react-md/autocomplete&commit=c5bb05609126221985da30395a71cfdebd9d07d9", + "@react-md/autocomplete": "Howdju/react-md#workspace=@react-md/autocomplete&commit=739fcf8b359727d958d6befe46014fe8b3dfe11c", "@react-md/icon": "^2", "@react-md/layout": "^2", "@react-md/menu": "^2", diff --git a/premiser-ui/src/ApiAutoComplete.test.tsx b/premiser-ui/src/ApiAutoComplete.test.tsx new file mode 100644 index 00000000..49fd01e1 --- /dev/null +++ b/premiser-ui/src/ApiAutoComplete.test.tsx @@ -0,0 +1,52 @@ +import React from "react"; +import { screen } from "@testing-library/react"; + +import ApiAutoComplete from "./ApiAutoComplete"; +import { + renderWithProviders, + setupUserEvent, + withFakeTimers, +} from "./testUtils"; +import { schema } from "normalizr"; + +withFakeTimers(); + +describe("ApiAutoComplete", () => { + test("enter submits", async () => { + const onSubmit = jest.fn((e) => e.preventDefault()); + interface Thingy { + name: string; + } + const suggestionSchema = new schema.Entity("thingies"); + + renderWithProviders( +
+ ({ + type: "TEST_TYPE", + payload: {}, + })} + cancelSuggestions={(_suggestionsKey) => ({ + type: "TEST_TYPE", + payload: {}, + })} + suggestionsKey="test-api-autocomplete" + suggestionSchema={suggestionSchema} + labelKey="name" + /> + + ); + + const user = setupUserEvent(); + const input = screen.getByRole("textbox"); + await user.type(input, "Hi diddily do"); + + // Act + await user.type(input, "{Enter}"); + + // Assert + expect(onSubmit).toHaveBeenCalled(); + }); +}); diff --git a/premiser-ui/src/ApiAutoComplete.tsx b/premiser-ui/src/ApiAutoComplete.tsx index 4b62ed73..2bf5e895 100644 --- a/premiser-ui/src/ApiAutoComplete.tsx +++ b/premiser-ui/src/ApiAutoComplete.tsx @@ -2,7 +2,9 @@ import React, { ChangeEvent, ComponentProps, FocusEvent, + KeyboardEvent, ReactNode, + useRef, } from "react"; import { PayloadAction } from "@reduxjs/toolkit"; import { AutoComplete, AutoCompleteResult } from "@react-md/autocomplete"; @@ -22,6 +24,7 @@ import { useAppDispatch, useAppSelector } from "./hooks"; import { autocompletes } from "./actions"; import "./ApiAutoComplete.scss"; +import { Keys } from "./keyCodes"; export type FetchSuggestionsActionCreator = ( value: string, @@ -88,6 +91,7 @@ export default function ApiAutoComplete({ rows = 1, maxRows = -1, maxLength, + onKeyDown, ...rest }: Props) { const dispatch = useAppDispatch(); @@ -151,6 +155,18 @@ export default function ApiAutoComplete({ } : undefined; + const submitInputRef = useRef(null); + function _onKeyDown(event: KeyboardEvent) { + if (onKeyDown) { + onKeyDown(event); + } + if (!event.isDefaultPrevented() && singleLine && event.key === Keys.ENTER) { + // Since the ApiAutoComplete input is a textarea which lacks the 'enter submits form' + // behavior, simulate it with a submit input. + submitInputRef.current?.click(); + } + } + return ( <>
@@ -164,6 +180,7 @@ export default function ApiAutoComplete({ valueKey={labelKey} onBlur={_onBlur} onChange={onChange} + onKeyDown={_onKeyDown} onAutoComplete={_onAutoComplete} error={error} style={{ flexGrow: 1 }} @@ -175,6 +192,13 @@ export default function ApiAutoComplete({ messageProps={messageProps} /> {rightControls} + { + submitInputRef.current = input; + }} + type="submit" + style={{ display: "none" }} + />
); diff --git a/premiser-ui/src/TagsControl.test.tsx b/premiser-ui/src/TagsControl.test.tsx index aca38f20..20577fce 100644 --- a/premiser-ui/src/TagsControl.test.tsx +++ b/premiser-ui/src/TagsControl.test.tsx @@ -21,7 +21,7 @@ const server = withMockServer(); describe("TagsControl", () => { test("pressing enter with non-empty tag name adds tag and doesn't submit enclosing form", async () => { - const onSubmit = jest.fn(); + const onSubmit = jest.fn((e) => e.preventDefault()); const onTag = jest.fn(); const onUnTag = jest.fn(); diff --git a/premiser-ui/src/__snapshots__/CreatePropositionPage.test.tsx.snap b/premiser-ui/src/__snapshots__/CreatePropositionPage.test.tsx.snap index dd27436c..14a7b1a3 100644 --- a/premiser-ui/src/__snapshots__/CreatePropositionPage.test.tsx.snap +++ b/premiser-ui/src/__snapshots__/CreatePropositionPage.test.tsx.snap @@ -135,6 +135,10 @@ exports[`CreatePropositionPage (with fake timers) can add URL while editing a Wr +
+ @@ -604,6 +612,10 @@ exports[`CreatePropositionPage (with fake timers) can add URL while editing a Wr +
+
+ @@ -1372,6 +1392,10 @@ exports[`CreatePropositionPage (with fake timers) renders correctly with query p +