Edit Tree Node -> Title Lags Behind Field Value

[carlosmbe]

Describe the bug
The Title in the Editor lags a single character behind the actual field when being changed

To Reproduce
Steps to reproduce the behavior:

1. Go to any tree node and click edit
2. Delete a character or a few from Name and see observe the title reacts
3. See error

Expected behavior
Would be great if they were in sync

Screen Recording

Smaller.Type.Lag.mp4

Desktop:

• OS: Mac OSx Ventura
• Browser: Chrome
• Specify 7 Version: 7.8.11 and 7.8.12

[melton-jason]

I believe this has been an issue for quite some time (though I can't find an issue for it, if one existed).
Note that if you make any changes to the Form (not just name), the Dialog title gets updated.

[maxpatiiuk]

Likely will be fixed by migrating off backbone

[melton-jason]

I believe the issue is regarding BackBone events.
(Correct me if I'm wrong) We currently rely on BackBone events to monitor and perform callbacks when an event is triggered.
However, even when used in a useEffect() or similar hook, either the change to the resource happens after the re-render is triggered, or some BackBone's implementation of events does not work well with React hooks.

[maxpatiiuk]

I think the issue is that we don't have a useEffect() at all in this place and are using resource.get('') directly inside of component render (I might be wrong, I didn't look at the code) - which is intuitive, but causes a bug.

rather than fixing this place (and many more places that have a similar issue), we should just migrate to a new resource ORM, where resource changes trigger react re-render

[melton-jason]

Ah, I see now (maybe)!
For the ResourceView, we are getting the title from the useResourceView hook.
There is a useEffect() in the hook, but not on the Resource View component.
I'm assuming the 'fix' for this would be to create a useEffect() hook in ResourceView that forces a re-render when the 'title' value from the useResourceView hook changes. Although it does seem slightly redundant, it makes sense if this is the case 😅

specify7/specifyweb/frontend/js_src/lib/components/Forms/ResourceView.tsx

Lines 159 to 173 in 80ded6e

	const {
	formElement,
	formPreferences,
	form,
	title,
	formatted,
	jsxFormatted,
	specifyNetworkBadge,
	} = useResourceView({
	isLoading,
	isSubForm,
	mode,
	resource,
	viewName,
	});

specify7/specifyweb/frontend/js_src/lib/components/Forms/BaseResourceView.tsx

Lines 50 to 69 in 80ded6e

	const [formatted, setFormatted] = React.useState<LocalizedString>('');
	React.useEffect(() => {
	setFormatted(resource?.specifyModel.label ?? commonText.loading());
	return typeof resource === 'object'
	? resourceOn(
	resource,
	'change',
	(): void => {
	if (resource === undefined) return undefined;
	format(resource)
	.then((title) => {
	setFormatted(title ?? '');
	return undefined;
	})
	.catch(softFail);
	},
	true
	)
	: undefined;
	}, [resource]);

[emenslin]

Can recreate in edge (7.9.6)