[#3833]: Content - Item with relational field not reflecting correct locale when switch to other language version

src/apps/content-editor/src/app/components/Editor/Editor.js

@@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { AppLink } from "shell/components/AppLink";
 import { unescape } from "lodash";
 import { Field } from "./Field";
@@ -423,6 +423,7 @@ export default memo(function Editor({
                 field.settings?.maxCharLimit ?? MaxLengths[field.datatype]
               }
               minLength={field.settings?.minCharLimit ?? 0}
+              itemZUID={item?.meta?.ZUID}
             />
           </div>
         );

src/apps/content-editor/src/app/components/Editor/Field/Field.tsx

@@ -89,6 +89,7 @@ type FieldProps = {
   errors: Error;
   maxLength: number;
   minLength: number;
+  itemZUID?: string;
 };
 
 export const Field = memo(
@@ -110,6 +111,7 @@ export const Field = memo(
     maxLength,
     minLength,
     version,
+    itemZUID,
   }: FieldProps) => {
     const dispatch = useDispatch();
     const { data: fields } = useGetContentModelFieldsQuery({
@@ -655,6 +657,9 @@ export const Field = memo(
               relatedFieldZUID={relatedFieldZUID}
               onChange={onChange}
               fieldLabel={fieldData?.label}
+              langID={langID}
+              contentItemZUID={itemZUID}
+              contentVersion={version}
             />
           </FieldShell>
         );
@@ -671,6 +676,9 @@ export const Field = memo(
               relatedFieldZUID={relatedFieldZUID}
               onChange={onChange}
               fieldLabel={fieldData?.label}
+              langID={langID}
+              contentItemZUID={itemZUID}
+              contentVersion={version}
             />
           </FieldShell>
         );

src/shell/components/RelationalFieldBase/index.tsx

@@ -8,19 +8,21 @@ import {
 } from "@mui/icons-material";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 import { ActiveItem } from "./ActiveItem";
 import { FieldSelectorDialog } from "./FieldSelectorDialog";
 import {
   useGetContentModelQuery,
   useGetContentModelFieldsQuery,
 } from "../../services/instance";
-import { fetchItems } from "../../store/content";
+import { fetchItem, fetchItems } from "../../store/content";
 import { ActiveItemLoading } from "./ActiveItem/ActiveItemLoading";
 import { CreateNewItemDialog } from "./CreateNewItemDialog";
 import { useParams } from "../../hooks/useParams";
 import { CreateContentItemDialogContext } from "../../contexts/CreateContentItemDialogProvider";
+import { Language } from "shell/services/types";
+import { AppState } from "shell/store/types";
 
 type RelationalFieldBaseProps = {
   name: string;
@@ -31,6 +33,9 @@ type RelationalFieldBaseProps = {
   relatedFieldZUID: string;
   onChange: (value: string, name: string) => void;
   multiselect?: boolean;
+  langID?: number | null;
+  contentItemZUID?: string;
+  contentVersion?: number;
 };
 export const RelationalFieldBase = ({
   name,
@@ -41,13 +46,19 @@ export const RelationalFieldBase = ({
   relatedFieldZUID,
   onChange,
   multiselect,
+  langID = null,
+  contentItemZUID,
+  contentVersion,
 }: RelationalFieldBaseProps) => {
   const dispatch = useDispatch();
   const [params] = useParams();
   const [itemZUIDs, setItemZUIDs] = useState<string[]>(value?.split(",") || []);
   const [showAll, setShowAll] = useState(false);
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>(null);
   const [replace, setReplace] = useState<string | null>(null);
+  const [isUpdatingLocaleValue, setIsUpdatingLocaleValue] =
+    useState<boolean>(false);
+  const languages = useSelector((state: AppState) => state.languages);
   const [
     initiatorZUID,
     setInitiatorZUID,
@@ -67,6 +78,50 @@ export const RelationalFieldBase = ({
       }
     );
 
+  const updateItemLocale = useCallback(async () => {
+    //update locale if version <= 1
+    //item's default language is inherited
+    if (contentVersion <= 1 || !contentVersion) {
+      const valueArray = value?.split(",") || [];
+      const langCode =
+        languages?.find((lang: Language) => lang?.ID === langID)?.code ||
+        "en-US";
+
+      setIsUpdatingLocaleValue(true);
+      const langItems = await Promise.all(
+        valueArray
+          ?.map((itemVal) =>
+            dispatch(fetchItem(relatedModelZUID, itemVal))
+              //@ts-ignore
+              .then((resItem) => {
+                const itemData = resItem?.data;
+                return itemData?.siblings?.[langCode] || itemVal;
+              })
+          )
+          ?.filter(Boolean)
+      );
+      //trigger onchange event to update state
+      onChange(langItems?.join(","), name);
+      dispatch({
+        type: "UNMARK_ITEMS_DIRTY",
+        items: [contentItemZUID],
+      });
+      setIsUpdatingLocaleValue(false);
+    }
+  }, [
+    contentVersion,
+    value,
+    contentItemZUID,
+    languages,
+    langID,
+    relatedModelZUID,
+    name,
+  ]);
+
+  useEffect(() => {
+    updateItemLocale();
+  }, []);
+
   useEffect(() => {
     // Ensures that the values always synced
     setItemZUIDs(value?.split(",") || []);
@@ -111,7 +166,8 @@ export const RelationalFieldBase = ({
   };
 
   const isRenderedAsDialog = params.get("isDialog") === "true";
-  const isLoading = isLoadingModelData || isLoadingModelFields;
+  const isLoading =
+    isLoadingModelData || isLoadingModelFields || isUpdatingLocaleValue;
 
   return (
     <Box component="section">