Add onChange to linked rows, longform text area, and multi select arrays in automations (#11874)

* Add onChange to LinkedRowSelector

* Add onChange to Multiselect array

* Add onChange to TextArea

* lint

packages/builder/src/components/automation/SetupPanel/RowSelector.svelte

@@ -83,8 +83,7 @@
       if (Array.isArray(value)) {
         return value
       }
-
-      return [value]
+      return value.split(",").map(x => x.trim())
     }
 
     if (type === "json") {
@@ -146,7 +145,7 @@
                 placeholder={placeholders[schema.type]}
                 panel={AutomationBindingPanel}
                 value={Array.isArray(value[field])
-                  ? value[field].join(" ")
+                  ? value[field].join(",")
                   : value[field]}
                 on:change={e => onChange(e, field, schema.type)}
                 label={field}

packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte

@@ -55,9 +55,14 @@
     bind:value={value[field]}
     label={field}
     options={schema.constraints.inclusion}
+    on:change={e => onChange(e, field)}
   />
 {:else if schema.type === "longform"}
-  <TextArea label={field} bind:value={value[field]} />
+  <TextArea
+    label={field}
+    bind:value={value[field]}
+    on:change={e => onChange(e, field)}
+  />
 {:else if schema.type === "json"}
   <span>
     <Label>{field}</Label>
@@ -73,7 +78,11 @@
     />
   </span>
 {:else if schema.type === "link"}
-  <LinkedRowSelector bind:linkedRows={value[field]} {schema} />
+  <LinkedRowSelector
+    bind:linkedRows={value[field]}
+    {schema}
+    on:change={e => onChange(e, field)}
+  />
 {:else if schema.type === "string" || schema.type === "number"}
   <svelte:component
     this={isTestModal ? ModalBindableInput : DrawerBindableInput}

packages/builder/src/components/common/LinkedRowSelector.svelte

@@ -3,10 +3,13 @@
   import { API } from "api"
   import { Select, Label, Multiselect } from "@budibase/bbui"
   import { capitalise } from "../../helpers"
+  import { createEventDispatcher } from "svelte"
 
   export let schema
   export let linkedRows = []
 
+  const dispatch = createEventDispatcher()
+
   let rows = []
   let linkedIds = (Array.isArray(linkedRows) ? linkedRows : [])?.map(
     row => row?._id || row
@@ -44,7 +47,10 @@
     options={rows}
     getOptionLabel={getPrettyName}
     getOptionValue={row => row._id}
-    on:change={e => (linkedIds = e.detail ? [e.detail] : [])}
+    on:change={e => {
+      linkedIds = e.detail ? [e.detail] : []
+      dispatch("change", linkedIds)
+    }}
     {label}
     sort
   />
@@ -56,5 +62,6 @@
     getOptionLabel={getPrettyName}
     getOptionValue={row => row._id}
     sort
+    on:change={() => dispatch("change", linkedIds)}
   />
 {/if}