From d054d395b0e4a52be1e78e71398118cc065b51dc Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Wed, 17 Aug 2022 09:49:22 +0100
Subject: [PATCH] Start with prop default value if available

---
 .../toolpad/AppEditor/PageEditor/ComponentEditor.tsx | 12 ++++++------
 .../AppEditor/PageEditor/NodeAttributeEditor.tsx     |  5 ++++-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx
index ef8e73fb079..130f6448399 100644
--- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx
+++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentEditor.tsx
@@ -49,23 +49,23 @@ function ComponentPropsEditor<P>({ componentConfig, node }: ComponentPropsEditor
           <Typography variant="subtitle2" sx={{ mt: 1 }}>
             Layout:
           </Typography>
-          {componentConfig.hasLayoutBoxAlign ? (
+          {componentConfig.hasLayoutBoxJustify ? (
             <div className={classes.control}>
               <NodeAttributeEditor
                 node={node}
                 namespace="layout"
-                name="boxAlign"
-                argType={layoutBoxAlignArgTypeDef}
+                name="boxJustify"
+                argType={layoutBoxJustifyArgTypeDef}
               />
             </div>
           ) : null}
-          {componentConfig.hasLayoutBoxJustify ? (
+          {componentConfig.hasLayoutBoxAlign ? (
             <div className={classes.control}>
               <NodeAttributeEditor
                 node={node}
                 namespace="layout"
-                name="boxJustify"
-                argType={layoutBoxJustifyArgTypeDef}
+                name="boxAlign"
+                argType={layoutBoxAlignArgTypeDef}
               />
             </div>
           ) : null}
diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx
index 5f09f4d3273..b3396b52d9f 100644
--- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx
+++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx
@@ -29,7 +29,10 @@ export default function NodeAttributeEditor({
     [domApi, node, namespace, name],
   );
 
-  const propValue: BindableAttrValue<unknown> | null = (node as any)[namespace]?.[name] ?? null;
+  const propValue: BindableAttrValue<unknown> | null =
+    (node as any)[namespace]?.[name] ??
+    (argType.defaultValue && appDom.createConst(argType.defaultValue)) ??
+    null;
 
   const bindingId = `${node.id}${namespace ? `.${namespace}` : ''}.${name}`;
   const { bindings, pageState } = usePageEditorState();