Disable saving options types when an invalid option name exists

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -95,6 +95,7 @@
     },
   }
   let autoColumnInfo = getAutoColumnInformation()
+  let optionsValid = true
 
   $: rowGoldenSample = RowUtils.generateGoldenSample($rows)
   $: if (primaryDisplay) {
@@ -138,7 +139,8 @@
   $: invalid =
     !editableColumn?.name ||
     (editableColumn?.type === LINK_TYPE && !editableColumn?.tableId) ||
-    Object.keys(errors).length !== 0
+    Object.keys(errors).length !== 0 ||
+    !optionsValid
   $: errors = checkErrors(editableColumn)
   $: datasource = $datasources.list.find(
     source => source._id === table?.sourceId
@@ -562,6 +564,7 @@
     <OptionsEditor
       bind:constraints={editableColumn.constraints}
       bind:optionColors={editableColumn.optionColors}
+      bind:valid={optionsValid}
     />
   {:else if editableColumn.type === FieldType.LONGFORM}
     <div>
@@ -585,6 +588,7 @@
     <OptionsEditor
       bind:constraints={editableColumn.constraints}
       bind:optionColors={editableColumn.optionColors}
+      bind:valid={optionsValid}
     />
   {:else if editableColumn.type === DATE_TYPE && !editableColumn.autocolumn}
     <div class="split-label">

packages/builder/src/components/backend/DataTable/modals/OptionsEditor.svelte

@@ -5,10 +5,11 @@
   import { tick } from "svelte"
   import { Constants } from "@budibase/frontend-core"
   import { getSequentialName } from "helpers/duplicate"
-  import { writable } from "svelte/store"
+  import { derived, writable } from "svelte/store"
 
   export let constraints
   export let optionColors = {}
+  export let valid = true
 
   const flipDurationMs = 130
   const { OptionColours } = Constants
@@ -21,11 +22,22 @@
       invalid: false,
     }))
   )
+  const enrichedOptions = derived(options, $options => {
+    let enriched = []
+    $options.forEach(option => {
+      enriched.push({
+        ...option,
+        valid: option.name && !enriched.some(opt => opt.name === option.name),
+      })
+    })
+    return enriched
+  })
 
   let openOption = null
   let anchor = null
 
   $: options.subscribe(updateConstraints)
+  $: valid = $enrichedOptions.every(option => option.valid)
 
   const updateConstraints = options => {
     constraints.inclusion = options.map(option => option.name)
@@ -74,25 +86,9 @@
     openOption = null
   }
 
-  const handleNameChange = (id, newName) => {
-    // Check we don't already have this option
-    const existing = $options.some(option => {
-      return (option.name === newName) & (option.id !== id)
-    })
-    const invalid = !newName || existing
+  const handleNameChange = (id, name) => {
     options.update(state => {
-      state.find(option => option.id === id).invalid = invalid
-      return state.slice()
-    })
-
-    // Stop if invalid
-    if (invalid) {
-      return
-    }
-
-    // Update name
-    options.update(state => {
-      state.find(option => option.id === id).name = newName
+      state.find(option => option.id === id).name = name
       return state.slice()
     })
   }
@@ -111,11 +107,11 @@
     on:consider={e => options.set(e.detail.items)}
     on:finalize={e => options.set(e.detail.items)}
   >
-    {#each $options as option (option.id)}
+    {#each $enrichedOptions as option (option.id)}
       <div
         class="option"
         animate:flip={{ duration: flipDurationMs }}
-        class:invalid={option.invalid}
+        class:invalid={!option.valid}
       >
         <div class="drag-handle">
           <Icon name="DragHandle" size="L" />