From 33d0b2defc75a7c6194ae3c952c2483858423b3d Mon Sep 17 00:00:00 2001
From: Polle Pas <polleps@gmail.com>
Date: Fri, 26 Jan 2024 16:48:27 +0100
Subject: [PATCH]  #816 Fix table dialogs not submitting on enter

---
 browser/CHANGELOG.md                          |  1 +
 .../src/components/Tag/CreateTagRow.tsx       |  1 +
 .../TablePage/PropertyForm/PropertyForm.tsx   | 22 ++++++++++++++-----
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/browser/CHANGELOG.md b/browser/CHANGELOG.md
index 89aa4a65b..4bc7b6ec8 100644
--- a/browser/CHANGELOG.md
+++ b/browser/CHANGELOG.md
@@ -14,6 +14,7 @@ This changelog covers all three packages, as they are (for now) updated as a who
 - [#810](https://github.com/atomicdata-dev/atomic-server/issues/810) Add button to resource selectors to navigate to the selected resource.
 - [#764](https://github.com/atomicdata-dev/atomic-server/issues/764) Add option to format numbers as currency in tables.
 - [#819](https://github.com/atomicdata-dev/atomic-server/issues/819) Fix number input always shows 'required' even when it's optional.
+- [#816](https://github.com/atomicdata-dev/atomic-server/issues/816) Fix bug where editing a column in a table would not submit when pressing enter.
 - Fix server not rebuilding client when files changed.
 - Added persistent scrollbar to table
 - Improved table header UX
diff --git a/browser/data-browser/src/components/Tag/CreateTagRow.tsx b/browser/data-browser/src/components/Tag/CreateTagRow.tsx
index ecd722123..4684457c4 100644
--- a/browser/data-browser/src/components/Tag/CreateTagRow.tsx
+++ b/browser/data-browser/src/components/Tag/CreateTagRow.tsx
@@ -53,6 +53,7 @@ export function CreateTagRow({ parent, onNewTag }: CreateTagRowProps) {
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
       if (e.key === 'Enter') {
+        e.preventDefault();
         createNewTag();
       }
     },
diff --git a/browser/data-browser/src/views/TablePage/PropertyForm/PropertyForm.tsx b/browser/data-browser/src/views/TablePage/PropertyForm/PropertyForm.tsx
index 490a87c7f..942f25ffb 100644
--- a/browser/data-browser/src/views/TablePage/PropertyForm/PropertyForm.tsx
+++ b/browser/data-browser/src/views/TablePage/PropertyForm/PropertyForm.tsx
@@ -116,6 +116,14 @@ export function PropertyForm({
     [setName, setShortName],
   );
 
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = useCallback(
+    e => {
+      e.preventDefault();
+      onSubmit();
+    },
+    [onSubmit],
+  );
+
   // If name was already set remove the error.
   useEffect(() => {
     if (name) {
@@ -126,15 +134,11 @@ export function PropertyForm({
   const CategoryForm = categoryFormFactory(category);
 
   return (
-    <Form
-      onSubmit={e => {
-        e.preventDefault();
-        onSubmit();
-      }}
-    >
+    <Form onSubmit={handleSubmit}>
       <div>
         <InputWrapper $invalid={!!nameError}>
           <InputStyled
+            id='name-form'
             type='text'
             value={name}
             onChange={handleNameChange}
@@ -145,6 +149,8 @@ export function PropertyForm({
         {nameError && <ErrorChip>{nameError}</ErrorChip>}
       </div>
       <CategoryForm resource={resource} />
+      {/* Needed for inputs to submit on enter */}
+      <HiddenSubmitButton type='submit' />
     </Form>
   );
 }
@@ -154,3 +160,7 @@ const Form = styled.form`
   flex-direction: column;
   gap: 1rem;
 `;
+
+const HiddenSubmitButton = styled.button`
+  display: none;
+`;