Start with prop default value if available

mui · Aug 17, 2022 · e601911 · e601911
1 parent c0ab5bf
commit e601911
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git 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
@@ -29,7 +29,8 @@ 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] ?? appDom.createConst(argType.defaultValue) ?? null;
 
   const bindingId = `${node.id}${namespace ? `.${namespace}` : ''}.${name}`;
   const { bindings, pageState } = usePageEditorState();