fix: set/unset props based on condition

- the options prop was not getting set on block when its conditionally shown

Author: ruchamahabal

frontend/src/components/PropsEditor.vue

@@ -130,12 +130,18 @@ const componentProps = computed(() => {
 	const filteredProps: typeof propConfig = {}
 
 	Object.entries(propConfig).forEach(([propName, config]) => {
-		const isVisible = config.condition ? config.condition(currentProps) : true
-		if (!isVisible) return
+		const showProp = config.condition ? config.condition(currentProps) : true
+		if (!showProp) {
+			props.block?.removeProp(propName)
+			return
+		}
 
 		if (props.block?.componentProps[propName] === undefined) {
 			const defaultValue = typeof config.default === "function" ? config.default() : config.default
 			config.modelValue = defaultValue
+			if (defaultValue !== undefined) {
+				props.block?.setProp(propName, defaultValue)
+			}
 		} else {
 			config.modelValue = props.block.componentProps[propName]
 		}

frontend/src/data/components.ts

@@ -367,7 +367,7 @@ export const COMPONENTS: FrappeUIComponents = {
 			options: {
 				required: false,
 				type: Array,
-				default: ["John Doe", "Jane Doe"],
+				default: () => ["John Doe", "Jane Doe"],
 				condition: (state: Record<string, any>) => state.type === "select" || state.type === "autocomplete"
 			}
 		},

frontend/src/utils/block.ts

@@ -551,6 +551,10 @@ class Block implements BlockOptions {
 		this.componentProps[propName] = value
 	}
 
+	removeProp(propName: string) {
+		delete this.componentProps[propName]
+	}
+
 	// component slots
 	initializeSlots() {
 		Object.entries(this.componentSlots).forEach(([slotName, slot]) => {