Block child button onClick if container hasOnClick

packages/client/src/components/app/Button.svelte

@@ -4,6 +4,7 @@
 
   const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
+  const containerClickableStore = getContext("containerClickable")
 
   export let disabled = false
   export let text = ""
@@ -18,6 +19,10 @@
 
   let node
 
+  containerClickableStore.subscribe(hasOnClick => {
+    disabled = hasOnClick
+  })
+
   $: $component.editing && node?.focus()
   $: componentText = getComponentText(text, $builderStore, $component)
 

packages/client/src/components/app/Container.svelte

@@ -1,9 +1,13 @@
 <script>
-  import { getContext } from "svelte"
+  import { getContext, setContext } from "svelte"
+  import { writable } from "svelte/store"
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
 
+  const containerClickableStore = writable(false)
+  setContext("containerClickable", containerClickableStore)
+
   export let direction
   export let hAlign
   export let vAlign
@@ -24,6 +28,7 @@
     sizeClass,
     gapClass,
   ].join(" ")
+  $: containerClickableStore.set(!!onClick)
 </script>
 
 <div

packages/client/src/utils/buttonActions.js

@@ -333,6 +333,10 @@ const confirmTextMap = {
  * A handler returning `false` is a flag to stop execution of handlers
  */
 export const enrichButtonActions = (actions, context) => {
+  if (actions && actions.length === 0) {
+    return null
+  }
+
   // Prevent button actions in the builder preview
   if (!actions || get(builderStore).inBuilder) {
     return () => {}