Change to form tag and include check for manual button press

apps/app/src/client/components/Admin/MarkdownSetting/ContentDispositionSettings.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { useForm } from 'react-hook-form';
 
@@ -70,6 +70,7 @@ const ContentDispositionSettings: React.FC = () => {
 
   const [currentInput, setCurrentInput] = useState<string>('');
   const [error, setError] = useState<string | null>(null);
+  const isManualSubmit = useRef(false);
 
   const {
     handleSubmit,
@@ -138,6 +139,10 @@ const ContentDispositionSettings: React.FC = () => {
   );
 
   const onSubmit = async (data: ContentDispositionSettingsType) => {
+    if (!isManualSubmit.current) {
+      return;
+    }
+
     try {
       setError(null);
       await updateSettings(data);
@@ -159,7 +164,7 @@ const ContentDispositionSettings: React.FC = () => {
   if (isLoading && !currentSettings) return <div>Loading...</div>;
 
   return (
-    <div className="row">
+    <form className="row" onSubmit={handleSubmit(onSubmit)}>
       <div className="col-12">
         <h2 className="mb-4 border-0">
           {t('markdown_settings.content-disposition_header')}
@@ -178,6 +183,11 @@ const ContentDispositionSettings: React.FC = () => {
                   value={currentInput}
                   onChange={(e) => setCurrentInput(e.target.value)}
                   placeholder="e.g. image/png"
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                    }
+                  }}
                 />
                 <button
                   className="btn btn-primary px-3 flex-shrink-0 rounded-3 fw-bold"
@@ -241,11 +251,14 @@ const ContentDispositionSettings: React.FC = () => {
         </div>
 
         <AdminUpdateButtonRow
-          onClick={handleSubmit(onSubmit)}
+          onClick={() => {
+            isManualSubmit.current = true;
+            handleSubmit(onSubmit)();
+          }}
           disabled={!isDirty || isUpdating}
         />
       </div>
-    </div>
+    </form>
   );
 };