From 14ab4c64ce2beaa3e41e47198feaaad2208d36c8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 31 Aug 2022 11:39:04 +0100
Subject: [PATCH] Only fire onchange events from form fields when values change
 to a new valid value

---
 .../client/src/components/app/forms/AttachmentField.svelte   | 4 ++--
 packages/client/src/components/app/forms/BooleanField.svelte | 4 ++--
 .../client/src/components/app/forms/DateTimeField.svelte     | 4 ++--
 packages/client/src/components/app/forms/InnerForm.svelte    | 2 +-
 packages/client/src/components/app/forms/JSONField.svelte    | 4 ++--
 .../client/src/components/app/forms/LongFormField.svelte     | 4 ++--
 .../client/src/components/app/forms/MultiFieldSelect.svelte  | 4 ++--
 packages/client/src/components/app/forms/OptionsField.svelte | 4 ++--
 .../client/src/components/app/forms/RelationshipField.svelte | 4 ++--
 packages/client/src/components/app/forms/S3Upload.svelte     | 4 ++--
 packages/client/src/components/app/forms/StringField.svelte  | 5 ++---
 11 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/packages/client/src/components/app/forms/AttachmentField.svelte b/packages/client/src/components/app/forms/AttachmentField.svelte
index 5023e77ae..bbb5314a8 100644
--- a/packages/client/src/components/app/forms/AttachmentField.svelte
+++ b/packages/client/src/components/app/forms/AttachmentField.svelte
@@ -48,8 +48,8 @@
   }
 
   const handleChange = e => {
-    fieldApi.setValue(e.detail)
-    if (onChange) {
+    const changed = fieldApi.setValue(e.detail)
+    if (onChange && changed) {
       onChange({ value: e.detail })
     }
   }
diff --git a/packages/client/src/components/app/forms/BooleanField.svelte b/packages/client/src/components/app/forms/BooleanField.svelte
index b9c69ce68..a65d041c2 100644
--- a/packages/client/src/components/app/forms/BooleanField.svelte
+++ b/packages/client/src/components/app/forms/BooleanField.svelte
@@ -28,8 +28,8 @@
   }
 
   const handleChange = e => {
-    fieldApi.setValue(e.detail)
-    if (onChange) {
+    const changed = fieldApi.setValue(e.detail)
+    if (onChange && changed) {
       onChange({ value: e.detail })
     }
   }
diff --git a/packages/client/src/components/app/forms/DateTimeField.svelte b/packages/client/src/components/app/forms/DateTimeField.svelte
index 4ca766121..182a79aab 100644
--- a/packages/client/src/components/app/forms/DateTimeField.svelte
+++ b/packages/client/src/components/app/forms/DateTimeField.svelte
@@ -17,8 +17,8 @@
   let fieldApi
 
   const handleChange = e => {
-    fieldApi.setValue(e.detail)
-    if (onChange) {
+    const changed = fieldApi.setValue(e.detail)
+    if (onChange && changed) {
       onChange({ value: e.detail })
     }
   }
diff --git a/packages/client/src/components/app/forms/InnerForm.svelte b/packages/client/src/components/app/forms/InnerForm.svelte
index 554085ba9..05178ecfd 100644
--- a/packages/client/src/components/app/forms/InnerForm.svelte
+++ b/packages/client/src/components/app/forms/InnerForm.svelte
@@ -268,7 +268,7 @@
 
       // Skip if the value is the same
       if (!skipCheck && fieldState.value === value) {
-        return
+        return false
       }
 
       // Update field state
diff --git a/packages/client/src/components/app/forms/JSONField.svelte b/packages/client/src/components/app/forms/JSONField.svelte
index 4bb5ee542..607947605 100644
--- a/packages/client/src/components/app/forms/JSONField.svelte
+++ b/packages/client/src/components/app/forms/JSONField.svelte
@@ -37,8 +37,8 @@
 
   const handleChange = e => {
     const value = parseValue(e.detail)
-    fieldApi.setValue(value)
-    if (onChange) {
+    const changed = fieldApi.setValue(value)
+    if (onChange && changed) {
       onChange({ value })
     }
   }
diff --git a/packages/client/src/components/app/forms/LongFormField.svelte b/packages/client/src/components/app/forms/LongFormField.svelte
index 200e55af4..8d94f8331 100644
--- a/packages/client/src/components/app/forms/LongFormField.svelte
+++ b/packages/client/src/components/app/forms/LongFormField.svelte
@@ -47,8 +47,8 @@
   }
 
   const handleChange = e => {
-    fieldApi.setValue(e.detail)
-    if (onChange) {
+    const changed = fieldApi.setValue(e.detail)
+    if (onChange && changed) {
       onChange({ value: e.detail })
     }
   }
diff --git a/packages/client/src/components/app/forms/MultiFieldSelect.svelte b/packages/client/src/components/app/forms/MultiFieldSelect.svelte
index 55bca89c2..a6889f37b 100644
--- a/packages/client/src/components/app/forms/MultiFieldSelect.svelte
+++ b/packages/client/src/components/app/forms/MultiFieldSelect.svelte
@@ -44,8 +44,8 @@
   }
 
   const handleChange = e => {
-    fieldApi.setValue(e.detail)
-    if (onChange) {
+    const changed = fieldApi.setValue(e.detail)
+    if (onChange && changed) {
       onChange({ value: e.detail })
     }
   }
diff --git a/packages/client/src/components/app/forms/OptionsField.svelte b/packages/client/src/components/app/forms/OptionsField.svelte
index 1df0216f5..5e2df5046 100644
--- a/packages/client/src/components/app/forms/OptionsField.svelte
+++ b/packages/client/src/components/app/forms/OptionsField.svelte
@@ -34,8 +34,8 @@
   )
 
   const handleChange = e => {
-    fieldApi.setValue(e.detail)
-    if (onChange) {
+    const changed = fieldApi.setValue(e.detail)
+    if (onChange && changed) {
       onChange({ value: e.detail })
     }
   }
diff --git a/packages/client/src/components/app/forms/RelationshipField.svelte b/packages/client/src/components/app/forms/RelationshipField.svelte
index ce2f19478..735b44b9a 100644
--- a/packages/client/src/components/app/forms/RelationshipField.svelte
+++ b/packages/client/src/components/app/forms/RelationshipField.svelte
@@ -84,8 +84,8 @@
   }
 
   const handleChange = value => {
-    fieldApi.setValue(value)
-    if (onChange) {
+    const changed = fieldApi.setValue(value)
+    if (onChange && changed) {
       onChange({ value })
     }
   }
diff --git a/packages/client/src/components/app/forms/S3Upload.svelte b/packages/client/src/components/app/forms/S3Upload.svelte
index 188ff042e..795e2e433 100644
--- a/packages/client/src/components/app/forms/S3Upload.svelte
+++ b/packages/client/src/components/app/forms/S3Upload.svelte
@@ -90,8 +90,8 @@
   }
 
   const handleChange = e => {
-    fieldApi.setValue(e.detail)
-    if (onChange) {
+    const changed = fieldApi.setValue(e.detail)
+    if (onChange && changed) {
       onChange({ value: e.detail })
     }
   }
diff --git a/packages/client/src/components/app/forms/StringField.svelte b/packages/client/src/components/app/forms/StringField.svelte
index fcdcfdc09..26136b5d8 100644
--- a/packages/client/src/components/app/forms/StringField.svelte
+++ b/packages/client/src/components/app/forms/StringField.svelte
@@ -16,8 +16,8 @@
   let fieldApi
 
   const handleChange = e => {
-    fieldApi.setValue(e.detail)
-    if (onChange) {
+    const changed = fieldApi.setValue(e.detail)
+    if (onChange && changed) {
       onChange({ value: e.detail })
     }
   }
@@ -29,7 +29,6 @@
   {disabled}
   {validation}
   {defaultValue}
-  {onChange}
   type={type === "number" ? "number" : "string"}
   bind:fieldState
   bind:fieldApi