jsonforms and the onChange event?

[rsoika]

I have implemented a GLSP UIExtension showing a property panel when a node element is selected. The property panel uses JsonForms to display custom properties of a node element so that the user can change them:

This is all working very well, jsonForms are a cool feature!

To react on changes I have added a callBack method to the jsonForms onChange hook:

	if (element instanceof EventNode) {
		const event: EventNode = element;
		ReactDOM.render(
			<JsonForms
				data={event.propetriesData}
				cells={vanillaCells}
				renderers={vanillaRenderers}
				onChange={({ errors, data }) => this.setState({ data })}
			/>,
			this.bodyDiv
		);

But the onChange event is fired from the JsonFomrs each time the user hits a key in an input field. So during typing new values I currently generate a lot of applyEdit Actions send from the glsp-client to the glsp-server.

I would have expected that the onChange is equal to input.onchange and not input.keyup which seems to me is currently the case (maybe a React 'feature'?)

So my question is if there is a elegant way to bind my callback to the input.onchange event? Or maybe an event when the users leaves the jsonForm (something like onblur..)

[vhemery]

This is kind of a recurrent issue.
Currently, there are two approaches to workaround it it:

• either you add a debounce (from 'lodash') to the onChange function: this will not fire only on focus loss, but at least it will fire only after a delay if you are typing fast. The bonus is that if you're changing other inputs also very fast, all your changes will be grouped in a single treatment. The drawbacks are that your changes will not be applied immediately and ... well ... that your changes will be grouped in single treatment which may complicate your treatment or not correspond to your functional needs. ;)
• or you override all your text-based renderers to change the onChange trigger. ( https://jsonforms.io/faq#how-can-i-integrate-a-custom-renderer )

IMHO it would probably be worth to propose a new enhancement to enable both behaviors in jsonforms. We could then configure with a simple option whether onChange events are triggerred on focus loss or on each typing event. Unfortunately, such an enhancement means upgrading each renderer implementation, not only your preferred one.

Edit upgrade: looking at implementations, it looks like the change is called at 'onChange' event of the input... but called nevertheless at each character change. So I'm not sure, with React and Material in the loop, wheter input.onchange really is the solution or whether we should use focus loss instead...

[vhemery]

Submitted eclipsesource/jsonforms#1905
My project is also concerned by this one as our client would like to make the switch.

[rsoika]

Thanks a lot for you answer and rising the issue.

[vhemery]

So adding a debounce (from 'lodash') to the onChange function - as @vhemery mentioned first in eclipse-emfcloud/emfcloud#152 seems to be sufficient. And it would be nice if I could activate such a behaviour via an option.

You don't need this feature request for this. You just pass the debounced function to JsonForms... Here is an illustrated exemple.
In your React component invoking JsonForms, create the function once (hence not in the render method) :

    /** The debounced version of jsonformsOnChange method, allowing to not invoke it too often */
    private debouncedJsonformsOnChange: DebouncedFunc<(state: Pick<JsonFormsCore, 'data' | 'errors'>) => void>;

    /**
     * Create a new React component
     * @param props component properties
     */
    constructor(props: Properties.Props) {
        super(props);
        [...]
        this.debouncedJsonformsOnChange =
            // add a debounce delay to subscription to let user type
            debounce(
                (state: Pick<JsonFormsCore, 'data' | 'errors'>) => this.jsonformsOnChange(state),
                500, { trailing: true }
            );
    }

    /**
     * React to the json forms change.
     * This function must not be called outside of a debounce, to make sure the update job is not executed too often on quick keyboard typing.
     * @param state the updated json forms state
     */
    private jsonformsOnChange(state: Pick<JsonFormsCore, 'data' | 'errors'>): void {
        [...]
    }

then on each re-render, pass it to the JsonForms element :
<JsonForms [...] onChange={this.debouncedJsonformsOnChange} />