Merge pull request #7535 from Budibase/reduce-onchange-event-frequency

Only fire onchange events from form fields when values change

packages/client/src/components/app/forms/AttachmentField.svelte

@@ -48,8 +48,8 @@
   }
 
   const handleChange = e => {
-    fieldApi.setValue(e.detail)
+    const changed = fieldApi.setValue(e.detail)
-    if (onChange) {
+    if (onChange && changed) {
       onChange({ value: e.detail })
     }
   }

packages/client/src/components/app/forms/BooleanField.svelte

@@ -28,8 +28,8 @@
   }
 
   const handleChange = e => {
-    fieldApi.setValue(e.detail)
+    const changed = fieldApi.setValue(e.detail)
-    if (onChange) {
+    if (onChange && changed) {
       onChange({ value: e.detail })
     }
   }

packages/client/src/components/app/forms/DateTimeField.svelte

@@ -17,8 +17,8 @@
   let fieldApi
 
   const handleChange = e => {
-    fieldApi.setValue(e.detail)
+    const changed = fieldApi.setValue(e.detail)
-    if (onChange) {
+    if (onChange && changed) {
       onChange({ value: e.detail })
     }
   }

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

packages/client/src/components/app/forms/JSONField.svelte

@@ -37,8 +37,8 @@
 
   const handleChange = e => {
     const value = parseValue(e.detail)
-    fieldApi.setValue(value)
+    const changed = fieldApi.setValue(value)
-    if (onChange) {
+    if (onChange && changed) {
       onChange({ value })
     }
   }

packages/client/src/components/app/forms/LongFormField.svelte

@@ -47,8 +47,8 @@
   }
 
   const handleChange = e => {
-    fieldApi.setValue(e.detail)
+    const changed = fieldApi.setValue(e.detail)
-    if (onChange) {
+    if (onChange && changed) {
       onChange({ value: e.detail })
     }
   }

packages/client/src/components/app/forms/MultiFieldSelect.svelte

@@ -44,8 +44,8 @@
   }
 
   const handleChange = e => {
-    fieldApi.setValue(e.detail)
+    const changed = fieldApi.setValue(e.detail)
-    if (onChange) {
+    if (onChange && changed) {
       onChange({ value: e.detail })
     }
   }

packages/client/src/components/app/forms/OptionsField.svelte

@@ -34,8 +34,8 @@
   )
 
   const handleChange = e => {
-    fieldApi.setValue(e.detail)
+    const changed = fieldApi.setValue(e.detail)
-    if (onChange) {
+    if (onChange && changed) {
       onChange({ value: e.detail })
     }
   }

packages/client/src/components/app/forms/RelationshipField.svelte

@@ -84,8 +84,8 @@
   }
 
   const handleChange = value => {
-    fieldApi.setValue(value)
+    const changed = fieldApi.setValue(value)
-    if (onChange) {
+    if (onChange && changed) {
       onChange({ value })
     }
   }

packages/client/src/components/app/forms/S3Upload.svelte

@@ -90,8 +90,8 @@
   }
 
   const handleChange = e => {
-    fieldApi.setValue(e.detail)
+    const changed = fieldApi.setValue(e.detail)
-    if (onChange) {
+    if (onChange && changed) {
       onChange({ value: e.detail })
     }
   }

packages/client/src/components/app/forms/StringField.svelte

@@ -16,8 +16,8 @@
   let fieldApi
 
   const handleChange = e => {
-    fieldApi.setValue(e.detail)
+    const changed = fieldApi.setValue(e.detail)
-    if (onChange) {
+    if (onChange && changed) {
       onChange({ value: e.detail })
     }
   }
@@ -29,7 +29,6 @@
   {disabled}
   {validation}
   {defaultValue}
-  {onChange}
   type={type === "number" ? "number" : "string"}
   bind:fieldState
   bind:fieldApi