fix: properly update duplicated and none i18n fields when default locale updates (#934)
This commit is contained in:
committed by
GitHub
parent
a508158f59
commit
7b9d653411
@ -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
|
||||
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
@ -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
|
||||
|
@ -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 () => {
|
||||
|
Reference in New Issue
Block a user