Is this the intended feature or BUG of PersistOnFieldChange?

[kausik10]

Hi, I'm trying to implement autosave for rich-text fields.
Upon experimenting, I found out that contember provides PersistOnFieldChange defined in this way

export const PersistOnFieldChange = ({
    field,
}: {
    field: SugaredRelativeSingleField["field"];
}) => {
    const triggerPersist = usePersist();
    const onError = usePersistErrorHandler();
    const getField = useField(field).getAccessor;
    useEffect(() => {
        let persisting = false;
        return getField().addEventListener(
            { type: "update" },
            async (field) => {
                if (persisting || field.value === field.valueOnServer) {
                    return;
                }
                persisting = true;
                try {
                    await Promise.resolve();
                    await triggerPersist().catch(onError);
                } finally {
                    persisting = false;
                }
            }
        );
    }, [getField, onError, triggerPersist]);

    return null;
};

The problem is described with a scenario below:

• If I type a single character A then triggerPersist is called. Thus, the character is saved to the correct entity. (Which is excellent).
• However, I lose control of the input-field and have to manually click the input-field again to type.
• All in all, only one character can be typed at a single time.

Also there is a PersistOnFieldChange defined in the @contember/interface with the same issue.

export const PersistOnFieldChange = Component(({ field, onPersistError, onPersistSuccess }: PersistOnFieldChangeProps) => {
	const doPersist = useDecoratedPersist({ onPersistError, onPersistSuccess })
	const getField = useField(field).getAccessor

	useEffect(() => {
		const unregister = getField().addEventListener({ type: 'update' }, async field => {
			if (!field.hasUnpersistedChanges) {
				// return
			}
			await doPersist()
		})

		return unregister
	}, [getField, doPersist])

	return null
}, ({ field }) => <Field field={field} />)

I wanted to know if this is the intended feature and also wanted to know how to modify this component to implement what I need.
Thank you!

[jonasnobile]

Hi,

Thanks for the question!

You're right in observing that PersistOnFieldChange isn't well-suited for rich-text fields. It's primarily designed for one-off discrete changes—like selecting an option from a dropdown or updating a status. We use it, for example, in our Kanban board to persist status changes instantly.

Saving every keystroke in a text-based field (especially rich-text) typically leads to issues like the one you're seeing—it interrupts the input flow and doesn't scale well in practice.

Could you share more about your use case for autosaving the rich-text field? Depending on what you're trying to achieve, we might be able to suggest a better pattern—like debounced saving or saving on blur or inactivity.

[kausik10]

Hi,
I was looking for a feature to solve the problem described in the situation below:

• A user logs in and types in some texts, inserts links and stuff in a page
• The user gets caught up in other things and forgets to hit the Save button.
• The user navigates to other links in the application
• Thus, all the changes are lost.

I saw that contember provides PersistOnCmd where we have to press Ctrl + C to save.
And I tried tweaking it to have the functionality to save when removing the focus or onblur as you mentioned. However, things didn't workout as I intended.

Currently, I have fixed this issue by popping up a dialog warning the user about unsaved changes which works well with the scope.
However, having the autosave would be a handy tool for future projects.

Thank you!

[jonasnobile]

You can use NavigationGuardDialog to notify user about un-saved changes on the page.