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

packages/core/src/components/entry-editor/editor-control-pane/EditorControl.tsx

@@ -105,13 +105,15 @@ const EditorControl = ({
     [field, i18n?.defaultLocale, parentDuplicate, locale],
   );
   const i18nDisabled = useMemo(
-    () => isFieldHidden(field, locale, i18n?.defaultLocale),
+    () =>
+      isFieldHidden(field, locale, i18n?.defaultLocale) ||
+      isFieldDuplicate(field, locale, i18n?.defaultLocale),
     [field, i18n?.defaultLocale, locale],
   );
   const hidden = useHidden(field, entry, listItemPath);
 
   useEffect(() => {
-    if (!['list', 'object'].includes(field.widget)) {
+    if (!['list', 'object'].includes(field.widget) && !i18nDisabled) {
       return;
     }
 
@@ -220,7 +222,7 @@ const EditorControl = ({
           field: field as UnknownField,
           fieldsErrors,
           submitted,
-          disabled: disabled || duplicate || hidden || i18nDisabled,
+          disabled: disabled || duplicate || controlled || i18nDisabled,
           duplicate,
           label: getFieldLabel(field, t),
           locale,
@@ -237,7 +239,7 @@ const EditorControl = ({
           hasErrors,
           errors,
           theme,
-          controlled,
+          controlled: controlled || i18nDisabled,
         })}
       </div>
     );

packages/core/src/widgets/string/StringControl.tsx

@@ -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>) => {
+  const handleChange = useCallback(
-    setInternalValue(event.target.value);
+    (event: ChangeEvent<HTMLInputElement>) => {
-  }, []);
+      onChange(event.target.value);
-
+      setInternalValue(event.target.value);
-  useEffect(() => {
+    },
-    if (rawValue === debouncedInternalValue) {
+    [onChange],
-      return;
+  );
-    }
-
-    onChange(debouncedInternalValue);
-  }, [debouncedInternalValue, onChange, rawValue]);
 
   return (
     <Field

packages/core/src/widgets/string/__tests__/StringControl.spec.ts

@@ -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');
     });
   });

packages/core/src/widgets/text/TextControl.tsx

@@ -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),
+    () => (controlled || duplicate ? rawValue : internalRawValue),
-    [internalRawValue, duplicate, rawValue],
+    [controlled, duplicate, rawValue, internalRawValue],
   );
-  const debouncedInternalValue = useDebounce(internalValue, 250);
 
   const ref = useRef<HTMLInputElement | null>(null);
 
-  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
+  const handleChange = useCallback(
-    setInternalValue(event.target.value);
+    (event: ChangeEvent<HTMLInputElement>) => {
-  }, []);
+      onChange(event.target.value);
-
+      setInternalValue(event.target.value);
-  useEffect(() => {
+    },
-    if (rawValue === debouncedInternalValue) {
+    [onChange],
-      return;
+  );
-    }
-
-    onChange(debouncedInternalValue);
-  }, [debouncedInternalValue, onChange, rawValue]);
 
   return (
     <Field

packages/core/src/widgets/text/__tests__/TextControl.spec.ts

@@ -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);
+    expect(onChange).toHaveBeenCalledTimes(14);
-
+    expect(onChange).toHaveBeenLastCalledWith('I am some text');
-    await waitFor(() => {
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange).toHaveBeenLastCalledWith('I am some text');
-    });
   });
 
   it('should show error', async () => {