Copilot commented on code in PR #3293:
URL: https://github.com/apache/apisix-dashboard/pull/3293#discussion_r2742981835
##########
src/components/form-slice/FormPartUpstream/FormItemNodes.tsx:
##########
@@ -203,19 +203,19 @@ export const FormItemNodes = <T extends FieldValues>(
ob.setDisabled(disabled);
}, [disabled, ob]);
- const ref = useClickOutside(() => {
- const vals = parseToUpstreamNodes(toJS(ob.values));
+ // Sync form data with debounce to avoid excessive updates
+ const syncToForm = useDebouncedCallback((dataSource: DataSource[]) => {
+ const vals = parseToUpstreamNodes(dataSource);
fOnChange?.(vals);
restProps.onChange?.(vals);
- }, ['mouseup', 'touchend', 'mousedown', 'touchstart']);
+ }, 100);
Review Comment:
The 100ms debounce delay introduces a potential race condition where changes
made immediately before form submission may not be saved. If a user edits a
node and clicks Save within 100ms, the debounced callback won't have executed
yet, and the form will submit with stale data.
Consider using a synchronous call to `fOnChange` and `restProps.onChange`
without debouncing, or use a much smaller debounce value (e.g., 10-20ms). If
debouncing is necessary for performance, ensure the debounced callback is
flushed before form submission. The Mantine `useDebouncedCallback` hook may
provide a `flush` method that could be called in a form submission handler.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
