PythonControlledCapability problems to sync default values

[rodriguez-facundo]

When using material-ui to create controlled components:

• We can't set initial value === undefined because material-ui throws a console error,
• So we are forced to set the initial value equal to empty string

At the same time, when a component has a default value that we want to sync with python, (ideally) we would check if current value === undefined and we would call syncValueWithPython. But here we can't do that due to the above mentioned caveat.

So we are forced to use the empty string as a flag to trigger set default value. That leave us with a behaviour that is not ideal, because "what if the user wants to set the component value equal to the empty string?".

Granted that behaviour, we now face another problem which is that after calling connect() to connect the component with python, we don't have a callback to know when the component was connected, so we don't really know when to evaluate if this.state.value should be replaced with the default value. NOTE: we need to connect first to pull the value from python and verify that it is empty and only then to proceed to check if we have a default value to replace the empty string with.

The above mentioned issue is presented for 2 different React lifecycle methods (mounting and updating).

Something like this would fix the problem for now until we move away from all this logic we have in pythonControlledCapability to some more robust approach.

I tried to investigate @jupyter-widgets/base to check why the callback we sent to IPython to trigger a Geppetto event is not working but I'm running out of hours to keep digging this.

UNRELIABLE_SyncDefaultValueWithPython (timeInterval = 100, attempts = 0) {
    if (attempts < 3) {
        setTimeout(() => {
            if (this.props.default && this.state.value === '') {
                if (this.syncValueWithPython) {
                    // this function is added by jupyter_geppetto after the component is synched with python
                    this.syncValueWithPython(this.props.default);
                } else {
                    this.UNRELIABLE_SyncDefaultValueWithPython(timeInterval * 2, attempts + 1)
                }
            }
        }, timeInterval)
    } else {
        console.warn(`Tried to sync default value for ${this.props.model} and failed after 3 attempts.`)
    }
}