Default option labels and values

packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsDrawer.svelte

@@ -41,14 +41,12 @@
               bind:value={option.label}
               label="Label"
               labelPosition="left"
-              error={option.error?.label}
             />
             <Input
               placeholder="Value"
               bind:value={option.value}
               label="Value"
               labelPosition="left"
-              error={option.error?.value}
             />
             <Icon
               name="Close"

packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte

@@ -10,57 +10,25 @@
   let drawer
   let tempValue = value || []
 
-  const saveFilter = async () => {
-    let hasError = false
+  const saveOptions = async () => {
+    // Filter out incomplete options, default if needed
+    tempValue = tempValue.filter(option => option.value || option.label)
     for (let i = 0; i < tempValue.length; i++) {
       let option = tempValue[i]
-      if (!(option.label && option.value)) {
-        option.error = {
-          label: option.label ? undefined : "You must provide a label.",
-          value: option.value ? undefined : "You must provide a value.",
-        }
+      option.label = option.label ? option.label : option.value
+      option.value = option.value ? option.value : option.label
       tempValue[i] = option
-        hasError = true
-      }
-    }
-    if (!hasError) {
-      drawer.hide()
     }
     dispatch("change", tempValue)
-  }
-
-  const clearOptionErrors = () => {
-    for (let i = 0; i < tempValue.length; i++) {
-      let option = tempValue[i]
-      option.error = undefined
-      tempValue[i] = option
-    }
-  }
-
-  $: {
-    for (let i = 0; i < tempValue.length; i++) {
-      let option = tempValue[i]
-      if (option.error?.label && option.label) {
-        option.error.label = undefined
-      }
-      if (option.error?.value && option.value) {
-        option.error.value = undefined
-      }
-      tempValue[i] = option
-    }
+    drawer.hide()
   }
 </script>
 
-<ActionButton
-  on:click={() => {
-    clearOptionErrors()
-    drawer.show()
-  }}>Define Options</ActionButton
->
+<ActionButton on:click={drawer.show}>Define Options</ActionButton>
 <Drawer bind:this={drawer} title="Options">
   <svelte:fragment slot="description">
     Define the options for this picker.
   </svelte:fragment>
-  <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
+  <Button cta slot="buttons" on:click={saveOptions}>Save</Button>
   <OptionsDrawer bind:options={tempValue} slot="body" />
 </Drawer>