Default values on custom widgets from outside sources

Prerequisites

• I have read the documentation;
• Ideally, I’m providing a sample JSFiddle demonstrating the issue.

Description

I am trying to set custom components to have default values. However, these default values don’t come from the schema, but other external sources. The problem I am having is that if I have a page with multiple custom widgets that set the default value on creation, only the last widget in the form has the default value set. In the example provided I made a simple Date field that defaults to today’s value. On submission you can see that only the last date in the form actually has a value.

We did manage to solve this by wrapping the onChange call in a useEffect hook and adding a timeout to the onChange. This JSFiddle shows how we have it setup, but for some reason I cannot get React.useEffect to work on the JSFiddle setup so the example doesn’t actually work…

So my main question is, is this the correct / best available way to set a default value on a custom widget? I know that onChange should really only be called when the value has actually changed, but I couldn’t find another function available to the Widget that allowed me to set the value.

Steps to Reproduce

1. Create a custom component that calls onChange during creation to set a value.
2. Load a form that has multiple custom components that do this.
3. Submit form and see only one preset value come through

Expected behavior

All preset values are submitted

Actual behavior

Only last preset value is submitted

Version

1.8.1

[gonzaloaune]

Thanks @ivanlewin, I ended up doing something similar but abandoned the use of this library altogether for something that I can have more control of. Thanks for the tip though!

[jcbrockschmidt]

On mount, I set a timeout that, after 1 ms, calls onChange with the value for the current date. (I am not sure if the cleanup function is necessary since we’re talking about 1ms here, but it’s my attempt at good practices).

    useEffect(() => {
        if (props.value === undefined) {
            const timeoutId = setTimeout(
                () => props.onChange(dayjs().format('YYYY-MM-DD')),
                1
            );
            return () => clearTimeout(timeoutId);
        }
    }, []);

(I’m on v2.5.1 so I don’t know if this is solved on v3)

For anyone stumbling across this, I was able to simplify this to something like

    useEffect(() => {
        if (props.value === undefined) {
            return () => props.onChange(dayjs().format('YYYY-MM-DD'));
        }
    }, []);

I’m on v4.2.0. The original issue appears to be unsolved still.