#590 - Fix for image fields inside a sub-block

src/panelWebView/components/DataBlock/DataBlockField.tsx

@@ -15,6 +15,7 @@ export interface IDataBlockFieldProps {
   field: Field;
   parentFields: string[];
   value: any;
+  blockData: BlockFieldData | undefined;
   filePath: string;
   fieldsRenderer: (
     ctFields: Field[],
@@ -37,6 +38,7 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
   field,
   parentFields = [],
   value,
+  blockData,
   fieldsRenderer,
   onSubmit,
   parentBlock,
@@ -58,6 +60,7 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
 
   const onFieldUpdate = useCallback(
     (crntField: string | undefined, crntValue: any, parents: string[]) => {
+      debugger;
       const dataClone: any[] = Object.assign([], value);
 
       if (!crntField) {
@@ -91,7 +94,7 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
       // Delete the field group to have it added at the end
       delete data['fieldGroup'];
 
-      if (selectedIndex !== null && selectedIndex !== undefined) {
+      if (selectedIndex !== null && selectedIndex !== undefined && dataClone.length > 0) {
         dataClone[selectedIndex] = {
           ...data,
           fieldGroup: selectedGroup?.id
@@ -238,6 +241,21 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
     [SELECTION_STATE_KEY]
   );
 
+  const getSelectedIndex = useCallback(() => {
+    console.log(blockData)
+    let crntValue = [];
+
+    if (blockData?.selectedIndex !== null && blockData?.selectedIndex !== undefined) {
+      crntValue.push(blockData.selectedIndex);
+    }
+
+    if (selectedIndex !== null && selectedIndex !== undefined) {
+      crntValue.push(selectedIndex);
+    }
+
+    return crntValue.join('.');
+  }, [blockData, selectedIndex]);
+
   useEffect(() => {
     if (selectedIndex !== null) {
       const fieldData = value[selectedIndex];
@@ -293,7 +311,7 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
               {
                 parentFields: [...parentFields, field.name],
                 blockType: selectedGroup?.id || undefined,
-                selectedIndex: selectedIndex === null ? undefined : selectedIndex
+                selectedIndex: getSelectedIndex()
               },
               onFieldUpdate,
               `${field.name}-${selectedGroup?.id}-${selectedIndex || 0}`

src/panelWebView/components/Fields/PreviewImageField.tsx

@@ -70,11 +70,10 @@ export const PreviewImageField: React.FunctionComponent<IPreviewImageFieldProps>
       <FieldTitle label={label} icon={<PhotographIcon />} required={required} />
 
       <div
-        className={`metadata_field__preview_image ${
-          multiple && value && (value as PreviewImageValue[]).length > 0
-            ? `metadata_field__multiple_images`
-            : ''
-        } ${showRequiredState ? 'required' : ''}`}
+        className={`metadata_field__preview_image ${multiple && value && (value as PreviewImageValue[]).length > 0
+          ? `metadata_field__multiple_images`
+          : ''
+          } ${showRequiredState ? 'required' : ''}`}
       >
         {(!value || isFaultyImage || multiple) && (
           <button

src/panelWebView/components/Fields/WrapperField.tsx

@@ -428,7 +428,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
       </FieldBoundary>
     );
   } else if (field.type === 'block') {
-    const blockData = Object.assign([], parent[field.name]);
+    const fieldData = Object.assign([], parent[field.name]);
 
     return (
       <FieldBoundary key={field.name} fieldName={field.title || field.name}>
@@ -437,7 +437,8 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
           description={field.description}
           settings={settings}
           field={field}
-          value={blockData}
+          value={fieldData}
+          blockData={blockData}
           fieldsRenderer={renderFields}
           parentFields={parentFields}
           filePath={metadata.filePath as string}