feat: update internal control value for list and object widget whenever store changes (#933)

Author: KaneFreeman

packages/core/src/backend.ts

@@ -3,6 +3,7 @@ import attempt from 'lodash/attempt';
 import flatten from 'lodash/flatten';
 import get from 'lodash/get';
 import isError from 'lodash/isError';
+import set from 'lodash/set';
 import uniq from 'lodash/uniq';
 import { dirname } from 'path';
 
@@ -45,7 +46,6 @@ import filterEntries from './lib/util/filter.util';
 import { DRAFT_MEDIA_FILES, selectMediaFilePublicPath } from './lib/util/media.util';
 import { selectCustomPath, slugFromCustomPath } from './lib/util/nested.util';
 import { isNullish } from './lib/util/null.util';
-import { set } from './lib/util/object.util';
 import { fileSearch, sortByScore } from './lib/util/search.util';
 import { dateParsers, expandPath, extractTemplateVars } from './lib/widgets/stringTemplate';
 import createEntry from './valueObjects/createEntry';

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

@@ -110,6 +110,15 @@ const EditorControl = ({
   );
   const hidden = useHidden(field, entry, listItemPath);
 
+  useEffect(() => {
+    if (!['list', 'object'].includes(field.widget)) {
+      return;
+    }
+
+    setInternalValue(finalStorageValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [finalStorageValue]);
+
   useEffect(() => {
     if (hidden) {
       dispatch(changeDraftFieldValidation(path, [], i18n, isMeta));
@@ -220,10 +229,7 @@ const EditorControl = ({
           path,
           query,
           t,
-          value:
-            field.widget === 'list' || field.widget === 'object'
-              ? finalStorageValue
-              : internalValue,
+          value: internalValue,
           forList,
           listItemPath,
           forSingleList,

packages/core/src/lib/formatters.ts

@@ -1,10 +1,10 @@
 import get from 'lodash/get';
+import set from 'lodash/set';
 
 import { COMMIT_AUTHOR, COMMIT_DATE } from '../constants/commitProps';
 import { sanitizeSlug } from './urlHelper';
 import { selectIdentifier, selectInferredField } from './util/collection.util';
 import { selectField } from './util/field.util';
-import { set } from './util/object.util';
 import { isEmpty } from './util/string.util';
 import {
   addFileTemplateFields,

packages/core/src/lib/i18n.ts

@@ -1,9 +1,9 @@
 import escapeRegExp from 'lodash/escapeRegExp';
 import get from 'lodash/get';
 import groupBy from 'lodash/groupBy';
+import set from 'lodash/set';
 
 import { fileForEntry, selectEntrySlug } from './util/collection.util';
-import { set } from './util/object.util';
 
 import type {
   BaseField,

packages/core/src/lib/util/__tests__/object.util.spec.ts

@@ -1,4 +1,5 @@
 import once from 'lodash/once';
+import set from 'lodash/set';
 import sortBy from 'lodash/sortBy';
 
 import {
@@ -23,7 +24,6 @@ import {
   SORT_ENTRIES_SUCCESS,
 } from '../constants';
 import { VIEW_STYLES, VIEW_STYLE_TABLE } from '../constants/views';
-import { set } from '../lib/util/object.util';
 
 import type { EntriesAction } from '../actions/entries';
 import type { SearchAction } from '../actions/search';

packages/core/src/lib/util/object.util.ts

@@ -1,4 +1,6 @@
 import isEqual from 'lodash/isEqual';
+import set from 'lodash/set';
+import cloneDeep from 'lodash/cloneDeep';
 import { v4 as uuid } from 'uuid';
 
 import {
@@ -23,7 +25,6 @@ import {
 import { duplicateI18nFields, getDataPath } from '../lib/i18n';
 import { fileForEntry } from '../lib/util/collection.util';
 import { applyDefaultsToDraftData } from '../lib/util/entry.util';
-import { set } from '../lib/util/object.util';
 
 import type { EntriesAction } from '../actions/entries';
 import type { Entry, FieldsErrors } from '../interface';
@@ -70,7 +71,7 @@ function entryDraftReducer(
           ...entry,
           data: applyDefaultsToDraftData(fields, undefined, entry.data),
         },
-        original: entry,
+        original: cloneDeep(entry),
         fieldsErrors: {},
         hasChanged: false,
         key: uuid(),
@@ -89,7 +90,7 @@ function entryDraftReducer(
       return {
         ...newState,
         entry,
-        original: entry,
+        original: cloneDeep(entry),
         fieldsErrors: {},
         hasChanged: false,
         key: uuid(),
@@ -115,7 +116,7 @@ function entryDraftReducer(
       return {
         ...state,
         entry,
-        original: entry,
+        original: cloneDeep(entry),
         fieldsErrors: {},
         hasChanged: true,
         key: uuid(),
@@ -135,7 +136,7 @@ function entryDraftReducer(
       return {
         ...newState,
         entry,
-        original: entry,
+        original: cloneDeep(entry),
         fieldsErrors: {},
         hasChanged: true,
       };
@@ -203,24 +204,26 @@ function entryDraftReducer(
         ? ['meta']
         : (i18n && getDataPath(i18n.currentLocale, i18n.defaultLocale)) || ['data'];
 
+      const newEntry = cloneDeep(newState.entry);
+
       newState = {
         ...newState,
-        entry: set(newState.entry, `${dataPath.join('.')}.${path}`, value),
+        entry: set(newEntry, `${dataPath.join('.')}.${path}`, value),
       };
 
       if (i18n) {
         newState = duplicateI18nFields(newState, field, i18n.locales, i18n.defaultLocale, path);
       }
 
       let hasChanged =
-        !isEqual(newState.entry?.meta, newState.original?.meta) ||
-        !isEqual(newState.entry?.data, newState.original?.data);
+        !isEqual(newEntry?.meta, newState.original?.meta) ||
+        !isEqual(newEntry?.data, newState.original?.data);
 
-      const i18nData = newState.entry?.i18n ?? {};
+      const i18nData = newEntry?.i18n ?? {};
       for (const locale in i18nData) {
         hasChanged =
           hasChanged ||
-          !isEqual(newState.entry?.i18n?.[locale]?.data, newState.original?.i18n?.[locale]?.data);
+          !isEqual(newEntry?.i18n?.[locale]?.data, newState.original?.i18n?.[locale]?.data);
       }
 
       return {
@@ -322,7 +325,7 @@ function entryDraftReducer(
         ...newState,
         hasChanged: false,
         entry,
-        original: entry,
+        original: cloneDeep(entry),
       };
     }
 
@@ -343,7 +346,7 @@ function entryDraftReducer(
         ...newState,
         hasChanged: false,
         entry,
-        original: entry,
+        original: cloneDeep(entry),
       };
     }