Modified state not synced with UI when switching tabs

[SamMousa]

Are you requesting a feature, reporting a bug or ask a question?

Related to #1343

What is the current behavior?

I've created a custom JSON tab that uses Monaco Editor, the editor from vs code. (Cool thing about this is that Monaco can validate the JSON schema SJS creates)

Code roughly looks like this:

ReactElementFactory.Instance.registerElement(name, (props) => {
		return createElement(
			({
				component,
				creator,
				data
			}: {
				component: ComponentType<SvelteComponent>;
				creator: CreatorBase;
				data: Base;
			}) => {
				const container = useRef(null);
				useEffect(() => {
					const svelteComponentInstance = new component({
						target: container.current,
						props: {
							creator,
							dataModel: data
						}
					});

					return () => {
						svelteComponentInstance.$destroy();
						creator.setModified();
					}
				}, [container]);
				return createElement('div', { ref: container, style: { width: '100%', height: '100%' } });
			},
			{
				...props,
				component
			}
		);
	});

Note that the code executes properly, i've event listeners on onModified and onStateChanged and the state of the creator is "modified" after switching away form the tab.

There seems to be some inconsistency between the rendering of the button and the call to setModified. The issue can be worked around by using setTimeout

What is the expected behavior?

This should just work. Looking at the built in json editor it seems to use some undocumented API: getSurveyJSONTextCallback and setSurveyJSONTextCallback.

But it's unclear to me why manually setting the text and calling setModified does not work.

How would you reproduce the current behavior (if this is a bug)?

Provide the test code and the tested page URL (if applicable)

Tested page URL:

Test code

your_code_here

Specify your

• browser:
• editor version: