Fix default value not initializing for controlled properties

packages/toolpad-studio/src/runtime/ToolpadApp.tsx

@@ -478,9 +478,9 @@ function parseBindings(
  for (const [propName, argType] of Object.entries(argTypes)) {
  invariant(argType, `Missing argType for prop "${propName}"`);
 
- const initializerId = argType.defaultValueProp
- ? `${elm.id}.props.${argType.defaultValueProp}`
- : undefined;
+ const initializerExpression = argType.defaultValueProp
+ ? `${elm.name}.${argType.defaultValueProp}`
+ : JSON.stringify(getArgTypeDefaultValue(argType));
 
  const propValue: BindableAttrValue<any> = elm.props?.[propName];
 
@@ -503,7 +503,7 @@ function parseBindings(
  controlled.add(bindingId);
  parsedBindingsMap.set(bindingId, {
  scopePath,
- initializer: initializerId,
+ initializer: initializerExpression,
  });
  } else {
  parsedBindingsMap.set(bindingId, parseBinding(binding, { scopePath }));

packages/toolpad-studio/src/runtime/evalJsBindings.ts

@@ -200,7 +200,7 @@ export default function evalJsBindings(
 
  const initializer = binding.initializer;
  if (initializer) {
- const result = evaluateBinding(initializer, scopePath);
+ const result = jsRuntime.evaluateExpression(initializer, proxiedScope);
  if (result) {
  return result;
  }

test/integration/codeComponents/fixture/toolpad/application.yml

@@ -0,0 +1,3 @@
+apiVersion: v1
+kind: application
+spec: {}

test/integration/codeComponents/fixture/toolpad/components/MyTextField.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { createComponent } from '@toolpad/studio/browser';
+
+export interface MyTextFieldProps {
+ msg: string;
+ onMsgChange: (newMsg: string) => void;
+}
+
+function MyTextField({ msg, onMsgChange }: MyTextFieldProps) {
+ return <input value={msg} onChange={(event) => onMsgChange(event.target.value)} />;
+}
+
+export default createComponent(MyTextField, {
+ argTypes: {
+ msg: {
+ type: 'string',
+ default: 'Hello world!',
+ onChangeProp: 'onMsgChange',
+ },
+ },
+});

test/integration/codeComponents/fixture/toolpad/pages/page/page.yml

@@ -1,12 +1,14 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.54/docs/schemas/v1/definitions.json#properties/Page
+
 apiVersion: v1
 kind: page
 spec:
- id: 5h03vdu
  title: page
  display: shell
  content:
- - component: PageRow
- name: pageRow
- children:
- - component: codeComponent.MyBarChart
- name: codeComponent_MyBarChart
+ - component: codeComponent.MyBarChart
+ name: codeComponent_MyBarChart
+ layout:
+ columnSize: 1
+ alias:
+ - 5h03vdu

test/integration/codeComponents/fixture/toolpad/pages/page1/page.yml

@@ -0,0 +1,17 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.54/docs/schemas/v1/definitions.json#properties/Page
+
+apiVersion: v1
+kind: page
+spec:
+ title: page1
+ display: shell
+ authorization:
+ allowAll: true
+ content:
+ - component: codeComponent.MyTextField
+ name: myTextField
+ - component: Text
+ name: text
+ props:
+ value:
+ $$jsExpression: '`Output: ${myTextField.msg}`'

test/integration/codeComponents/index.spec.ts

@@ -81,3 +81,11 @@ export default createComponent(MyInspector, {
 
  await expect(editorModel.appCanvas.getByText('Hello everyone!')).toBeVisible();
 });
+
+test('Can handle default values for controlled props', async ({ page }) => {
+ const runtimeModel = new ToolpadRuntime(page);
+ await runtimeModel.goToPage('page1');
+
+ const test1 = page.getByText('Output: Hello world!');
+ await expect(test1).toBeVisible();
+});