fix: properly update duplicated and none i18n fields when default locale updates (#934)

This commit is contained in:
Daniel Lautzenheiser
2023-10-11 16:25:01 -04:00
committed by GitHub
parent a508158f59
commit 7b9d653411
5 changed files with 29 additions and 44 deletions

View File

@ -1,8 +1,7 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import React, { useCallback, useMemo, useRef, useState } from 'react';
import Field from '@staticcms/core/components/common/field/Field';
import TextField from '@staticcms/core/components/common/text-field/TextField';
import useDebounce from '@staticcms/core/lib/hooks/useDebounce';
import classNames from '@staticcms/core/lib/util/classNames.util';
import { generateClassNames } from '@staticcms/core/lib/util/theming.util';
@ -36,21 +35,16 @@ const StringControl: FC<WidgetControlProps<string, StringOrTextField>> = ({
() => (controlled || duplicate ? rawValue : internalRawValue),
[controlled, duplicate, rawValue, internalRawValue],
);
const debouncedInternalValue = useDebounce(internalValue, 250);
const ref = useRef<HTMLInputElement | null>(null);
const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
setInternalValue(event.target.value);
}, []);
useEffect(() => {
if (rawValue === debouncedInternalValue) {
return;
}
onChange(debouncedInternalValue);
}, [debouncedInternalValue, onChange, rawValue]);
const handleChange = useCallback(
(event: ChangeEvent<HTMLInputElement>) => {
onChange(event.target.value);
setInternalValue(event.target.value);
},
[onChange],
);
return (
<Field

View File

@ -66,10 +66,8 @@ describe(StringControl.name, () => {
await userEvent.type(input, 'I am some text');
});
expect(onChange).toHaveBeenCalledTimes(0);
await waitFor(() => {
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenCalledTimes(14);
expect(onChange).toHaveBeenLastCalledWith('I am some text');
});
});

View File

@ -1,8 +1,7 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import React, { useCallback, useMemo, useRef, useState } from 'react';
import Field from '@staticcms/core/components/common/field/Field';
import TextArea from '@staticcms/core/components/common/text-field/TextArea';
import useDebounce from '@staticcms/core/lib/hooks/useDebounce';
import classNames from '@staticcms/core/lib/util/classNames.util';
import { generateClassNames } from '@staticcms/core/lib/util/theming.util';
@ -27,29 +26,25 @@ const TextControl: FC<WidgetControlProps<string, StringOrTextField>> = ({
disabled,
field,
forSingleList,
controlled,
onChange,
}) => {
const rawValue = useMemo(() => value ?? '', [value]);
const [internalRawValue, setInternalValue] = useState(rawValue);
const internalValue = useMemo(
() => (duplicate ? rawValue : internalRawValue),
[internalRawValue, duplicate, rawValue],
() => (controlled || duplicate ? rawValue : internalRawValue),
[controlled, duplicate, rawValue, internalRawValue],
);
const debouncedInternalValue = useDebounce(internalValue, 250);
const ref = useRef<HTMLInputElement | null>(null);
const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
setInternalValue(event.target.value);
}, []);
useEffect(() => {
if (rawValue === debouncedInternalValue) {
return;
}
onChange(debouncedInternalValue);
}, [debouncedInternalValue, onChange, rawValue]);
const handleChange = useCallback(
(event: ChangeEvent<HTMLInputElement>) => {
onChange(event.target.value);
setInternalValue(event.target.value);
},
[onChange],
);
return (
<Field

View File

@ -2,8 +2,8 @@
* @jest-environment jsdom
*/
import '@testing-library/jest-dom';
import { act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { act, waitFor } from '@testing-library/react';
import { mockTextField } from '@staticcms/test/data/fields.mock';
import { createWidgetControlHarness } from '@staticcms/test/harnesses/widget.harness';
@ -66,12 +66,8 @@ describe(TextControl.name, () => {
await userEvent.type(input, 'I am some text');
});
expect(onChange).toHaveBeenCalledTimes(0);
await waitFor(() => {
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenLastCalledWith('I am some text');
});
expect(onChange).toHaveBeenCalledTimes(14);
expect(onChange).toHaveBeenLastCalledWith('I am some text');
});
it('should show error', async () => {