Skip to content

Commit 6126040

Browse files
committed
fix: don't overwrite user input when field recently changed
1 parent 8c706cd commit 6126040

1 file changed

Lines changed: 19 additions & 1 deletion

File tree

packages/core/components/AutoField/index.tsx

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
useCallback,
1010
useEffect,
1111
useMemo,
12+
useRef,
1213
useState,
1314
} from "react";
1415
import {
@@ -185,6 +186,9 @@ function AutoFieldInternal<
185186
return <Render {...mergedProps}>{children}</Render>;
186187
}
187188

189+
// Don't let external value changes update this if it's changed manually in the last X ms
190+
const RECENT_CHANGE_TIMEOUT = 200;
191+
188192
export function AutoFieldPrivate<
189193
ValueType = any,
190194
FieldType extends Field<ValueType> = Field<ValueType>
@@ -197,6 +201,9 @@ export function AutoFieldPrivate<
197201

198202
const [localValue, setLocalValue] = useState(value);
199203

204+
const [recentlyChanged, setRecentlyChanged] = useState(false);
205+
const timeoutRef = useRef<NodeJS.Timeout>();
206+
200207
const onChangeDb = useDebouncedCallback(
201208
(val, ui) => {
202209
onChange(val, ui);
@@ -207,11 +214,22 @@ export function AutoFieldPrivate<
207214

208215
const onChangeLocal = useCallback((val: any, ui?: Partial<UiState>) => {
209216
setLocalValue(val);
217+
218+
setRecentlyChanged(true);
219+
220+
clearTimeout(timeoutRef.current);
221+
222+
timeoutRef.current = setTimeout(() => {
223+
setRecentlyChanged(false);
224+
}, RECENT_CHANGE_TIMEOUT);
225+
210226
onChangeDb(val, ui);
211227
}, []);
212228

213229
useEffect(() => {
214-
setLocalValue(value);
230+
if (!recentlyChanged) {
231+
setLocalValue(value);
232+
}
215233
}, [value]);
216234

217235
const localProps = {

0 commit comments

Comments
 (0)