Fix submit-on-enter for ApiAutoComplete having singleLine=true (#392)

* Fix submit-on-enter for ApiAutoComplete having singleLine=true --------- Signed-off-by: Carl Gieringer <[email protected]>
Howdju · Apr 21, 2023 · d80d2b8 · d80d2b8
1 parent f52d461
commit d80d2b8
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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<Thingy>("thingies");
+
+ renderWithProviders(
+ <form onSubmit={onSubmit}>
+ <ApiAutoComplete
+ id="test-api-autocomplete"
+ name="test-api-autocomplete"
+ fetchSuggestions={(_value, _suggestionsKey) => ({
+ type: "TEST_TYPE",
+ payload: {},
+ })}
+ cancelSuggestions={(_suggestionsKey) => ({
+ type: "TEST_TYPE",
+ payload: {},
+ })}
+ suggestionsKey="test-api-autocomplete"
+ suggestionSchema={suggestionSchema}
+ labelKey="name"
+ />
+ </form>
+ );
+
+ 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
@@ -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<any>) {
  const dispatch = useAppDispatch();
@@ -151,6 +155,18 @@ export default function ApiAutoComplete({
  }
  : undefined;
 
+ const submitInputRef = useRef<HTMLInputElement | null>(null);
+ function _onKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
+ 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 (
  <>
  <div style={{ display: "flex", alignItems: "center" }}>
@@ -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}
+ <input
+ ref={(input) => {
+ submitInputRef.current = input;
+ }}
+ type="submit"
+ style={{ display: "none" }}
+ />
  </div>
  </>
  );

diff --git 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
@@ -135,6 +135,10 @@ exports[`CreatePropositionPage (with fake timers) can add URL while editing a Wr
  </span>
  </div>
  </div>
+ <input
+ style="display: none;"
+ type="submit"
+ />
  </div>
  </div>
  <div
@@ -198,6 +202,10 @@ exports[`CreatePropositionPage (with fake timers) can add URL while editing a Wr
  </span>
  </div>
  </div>
+ <input
+ style="display: none;"
+ type="submit"
+ />
  </div>
  </div>
  </section>
@@ -604,6 +612,10 @@ exports[`CreatePropositionPage (with fake timers) can add URL while editing a Wr
  </span>
  </div>
  </div>
+ <input
+ style="display: none;"
+ type="submit"
+ />
  </div>
  <div
  class="md-text-field-container md-full-width md-text-field-container--multiline writ-quote-url-input"
@@ -895,6 +907,10 @@ exports[`CreatePropositionPage (with fake timers) renders correctly with query p
  </span>
  </div>
  </div>
+ <input
+ style="display: none;"
+ type="submit"
+ />
  </div>
  </div>
  <div
@@ -958,6 +974,10 @@ exports[`CreatePropositionPage (with fake timers) renders correctly with query p
  </span>
  </div>
  </div>
+ <input
+ style="display: none;"
+ type="submit"
+ />
  </div>
  </div>
  </section>
@@ -1372,6 +1392,10 @@ exports[`CreatePropositionPage (with fake timers) renders correctly with query p
  </span>
  </div>
  </div>
+ <input
+ style="display: none;"
+ type="submit"
+ />
  </div>
  <div
  class="md-text-field-container md-full-width md-text-field-container--multiline writ-quote-url-input"

diff --git a/yarn.lock b/yarn.lock
@@ -5147,11 +5147,11 @@ __metadata:
  languageName: node
  linkType: hard
 
-"@react-md/autocomplete@Howdju/react-md#workspace=@react-md/autocomplete&commit=c5bb05609126221985da30395a71cfdebd9d07d9":
+"@react-md/autocomplete@Howdju/react-md#workspace=@react-md/autocomplete&commit=739fcf8b359727d958d6befe46014fe8b3dfe11c":
  version: 2.9.1
- resolution: "@react-md/autocomplete@https://github.com/Howdju/react-md.git#workspace=%40react-md%2Fautocomplete&commit=c5bb05609126221985da30395a71cfdebd9d07d9"
+ resolution: "@react-md/autocomplete@https://github.com/Howdju/react-md.git#workspace=%40react-md%2Fautocomplete&commit=739fcf8b359727d958d6befe46014fe8b3dfe11c"
  dependencies:
- "@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"
  "@react-md/list": ^2.9.1
  "@react-md/portal": ^2.9.1
  "@react-md/states": ^2.9.1
@@ -5262,9 +5262,9 @@ __metadata:
  languageName: node
  linkType: hard
 
-"@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":
  version: 2.9.1
- resolution: "@react-md/form@https://github.com/Howdju/react-md.git#workspace=%40react-md%2Fform&commit=c5bb05609126221985da30395a71cfdebd9d07d9"
+ resolution: "@react-md/form@https://github.com/Howdju/react-md.git#workspace=%40react-md%2Fform&commit=739fcf8b359727d958d6befe46014fe8b3dfe11c"
  dependencies:
  "@react-md/button": ^2.9.1
  "@react-md/icon": ^2.9.1
@@ -5285,7 +5285,7 @@ __metadata:
  dependenciesMeta:
  prop-types:
  optional: true
- checksum: 32a881d7e356f753321ab14443ba1f064ad13cc764428cdc244df0cda96d145899071daa1b0f0f07d3fc38678897afa63ffa7e9367f1f728b923f20c86886925
+ checksum: 6b1df492469953f33d2fb9184b29a64e06542a72de7c77475d914841069b294d54bd7e9349ec37f5435ab7b714bd1bce82733fc7d68073484985e8c518bd36d4
  languageName: node
  linkType: hard
 
@@ -22220,7 +22220,7 @@ __metadata:
  "@babel/preset-react": ^7.13.13
  "@babel/preset-typescript": ^7.18.6
  "@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