diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index e5eacb1a44..51408c793e 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -6,8 +6,7 @@
export let title
export let fillWidth
-
- let visible = false
+ export let visible = false
export function show() {
if (visible) {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
index 4d74ea9940..4447240c01 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionsEditor/OptionsEditor.svelte
@@ -7,22 +7,57 @@
export let value
+ let drawerVisible = false
let drawer
+ let valid = true
let tempValue = value || []
const saveFilter = async () => {
- // Filter out incomplete options
- tempValue = tempValue.filter(option => option.value && option.label)
- dispatch("change", tempValue)
- drawer.hide()
+ // Filter out incomplete options, but if all are incomplete then show error
+ let filteredOptions = tempValue.filter(
+ option => option.value && option.label
+ )
+ if (filteredOptions.length > 0 || tempValue.length === 0) {
+ tempValue = filteredOptions
+ valid = true
+ dispatch("change", tempValue)
+ drawer.hide()
+ } else {
+ valid = false
+ }
+ }
+
+ //If the drawer is hidden or error corrected, reset the validation
+ $: {
+ if (
+ !drawerVisible ||
+ tempValue.some(
+ option => option.label?.length > 0 && option.value?.length > 0
+ )
+ ) {
+ valid = true
+ }
}
Define Options
-
+
- Define the options for this picker.
+ {#if !valid}
+ You must provide option labels and values.
+ {:else}
+ Define the options for this picker.
+ {/if}
+
+