Merge pull request #2319 from Civolilah/bugfix/1884-email-preview

[Bugfix] Debounce Subject And Body Changing Value Instead of onBlur
invoiceninja · Jan 22, 2025 · 34d356d · 34d356d
2 parents a6bfc9e + 53798a7
commit 34d356d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 19 deletions.
diff --git a/src/components/forms/InputField.tsx b/src/components/forms/InputField.tsx
@@ -104,13 +104,15 @@ export function InputField(props: Props) {
           )}
           placeholder={props.placeholder || ''}
           onBlur={(event) => {
-            event.target.value =
-              event.target.value === '' && props.type === 'number'
-                ? '0'
-                : event.target.value;
+            if (!props.changeOverride) {
+              event.target.value =
+                event.target.value === '' && props.type === 'number'
+                  ? '0'
+                  : event.target.value;
 
-            props.onValueChange && props.onValueChange(event.target.value);
-            props.onChange && props.onChange(event);
+              props.onValueChange && props.onValueChange(event.target.value);
+              props.onChange && props.onChange(event);
+            }
           }}
           onChange={(event) => {
             event.target.value =

diff --git a/src/components/forms/MarkdownEditor.tsx b/src/components/forms/MarkdownEditor.tsx
@@ -19,7 +19,7 @@ interface Props {
   onChange: (value: string) => unknown;
   label?: string;
   disabled?: boolean;
-  handleOnBlur?: () => void;
+  handleChangeOnlyOnUserInput?: boolean;
 }
 
 export function MarkdownEditor(props: Props) {
@@ -96,9 +96,14 @@ export function MarkdownEditor(props: Props) {
           browser_spellcheck: true,
           convert_urls: false,
         }}
-        onEditorChange={handleChange}
-        onBlur={() => {
-          props.handleOnBlur?.();
+        onEditorChange={(currentValue) => {
+          if (props.handleChangeOnlyOnUserInput) {
+            if (currentValue !== props.value) {
+              handleChange(currentValue);
+            }
+          } else {
+            handleChange(currentValue);
+          }
         }}
         disabled={props.disabled}
       />

diff --git a/src/pages/invoices/email/components/Mailer.tsx b/src/pages/invoices/email/components/Mailer.tsx
@@ -228,11 +228,9 @@ export const Mailer = forwardRef<MailerComponent, Props>((props, ref) => {
             <InputField
               label={t('cc_email')}
               value={payloadData.ccEmail}
-              onValueChange={(value) => {
-                setPayloadData((current) => ({ ...current, ccEmail: value }));
-
-                setTriggerTemplateGeneration(true);
-              }}
+              onValueChange={(value) =>
+                setPayloadData((current) => ({ ...current, ccEmail: value }))
+              }
               errorMessage={errors?.errors.cc_email}
             />
           )}
@@ -246,16 +244,19 @@ export const Mailer = forwardRef<MailerComponent, Props>((props, ref) => {
               setTriggerTemplateGeneration(true);
             }}
             disabled={freePlan() && isHosted()}
+            changeOverride
             errorMessage={errors?.errors.subject}
           />
 
           {(proPlan() || enterprisePlan()) && (
             <MarkdownEditor
               value={payloadData.body}
-              onChange={(value) =>
-                setPayloadData((current) => ({ ...current, body: value }))
-              }
-              handleOnBlur={() => setTriggerTemplateGeneration(true)}
+              onChange={(value) => {
+                setPayloadData((current) => ({ ...current, body: value }));
+
+                setTriggerTemplateGeneration(true);
+              }}
+              handleChangeOnlyOnUserInput
             />
           )}
         </Card>