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} + +