#816 Fix table dialogs not submitting on enter

atomicdata-dev · Jan 26, 2024 · 33d0b2d · 33d0b2d
1 parent e8e141c
commit 33d0b2d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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;
+`;