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

* Fix submit-on-enter for ApiAutoComplete having singleLine=true

---------

Signed-off-by: Carl Gieringer <78054+carlgieringer@users.noreply.github.com>

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
 ```

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",

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();
+  });
+});

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>
     </>
   );

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();
 

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"

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