Add default value support to components

[oliviertassinari]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

Add the ability to pick the default value for a component

Examples 🌈

No response

Motivation 🔦

I would like the license key generator to default to a subscription mode. I'm using the Select component, in which it's impossible to implement.

[Janpot]

It's currently possible (as a test I've set your license model to "perpetual" by default), but the UI currently doesn't update with it. The reason is that default values are set on the first render only. I'd consider this a bug.

[oliviertassinari]

It's currently possible (as a test I've set your license model to "perpetual" by default), but the UI currently doesn't update with it. The reason is that default values are set on the first render only. I'd consider this a bug.

Oh, ok I see. I wasn't expecting this. I have set the value as a workaround for now.

---

I have found a new use case for that default value with a TextField. I would like it to be:

new Date(new Date().getTime() + 1000 * 366 * 60 * 60 * 24).getTime()

based after https://github.com/mui/mui-x/blob/cc09f3788d65f9694a0fbc1381681c701b802e47/packages/x-license-pro/src/cli/license-cli.ts#L86. Without it, it's quite a painful UI to use, also since we don't have a date picker component, I will have to think of a different way to offer options.

[oliviertassinari]

I have landed again on this problem. It behaves strangely. Here is a different angle:

1. Add a TextField on the page
2. Set the value to "foo"

4. 💥 the value is not visible on the text field
5. 💥 same in the binding view

6. Reload, now 4 and 5 have "foo" ✅

[Janpot]

It behaves strangely.

The reason it behaves like this is that default value is only used during the first render. When the default value is changed while the component is already being rendered, it doesn't have an effect. But I agree it's strange behavior, we should probably make an exception to it for when the value is changed by the user in the editor.

There may also be a benefit to having a separate defaultValue property.

[oliviertassinari]

The reason it behaves like this is that default value is only used during the first render.

+1 to try to experiment with remounting the component when the value changes. Effectively, to perform what a browser reload would do. If it's not enough, then defaultValue, might be needed.

[oliviertassinari]

I have found a new use case. I would like in https://master--toolpad.mui.com/_toolpad/app/cl4hla83p01949xoizo5uxf2a/editor/pages/cl4hla87800029xoihl7tf4qz to be able to use a page parameter. To be more precise, my use case is to be able to add ?order=121 in the URL of toolpad to prefill the order ID:

It would be equivalent to executing:

npx @material-ui/x-license --order 121

However, it's not possible, I can't bind the URL parameter to the "value":

It seems that I can't workaround the problem with a custom TextField either, it can't propagate the value up.

[Janpot]

I can't bind the URL parameter to the "value":

Are you looking for a way to two-way bind? as in, changes in the text editor should also be reflected in the url?

[oliviertassinari]

Are you looking for a way to two-way bind? as in, changes in the text editor should also be reflected in the URL?

No, one-way binding: URL -> Default value.

[oliviertassinari]

Awesome, a feature now in used for MUI X license key generator https://master--toolpad.mui.com/deploy/cl4hla83p01949xoizo5uxf2a/pages/cl4hla87800029xoihl7tf4qz?order=5225