Accordion panels in View, onPressEnter add child blocks inside accordion

src/components/manage/Blocks/Accordion/Edit.jsx

@@ -16,9 +16,7 @@ const Edit = (props) => {
     ? emptyBlocksForm()
     : data.data;
 
-  const [selectedBlock, setSelectedBlock] = useState(
-    properties.blocks_layout.items[0],
-  );
+  const [selectedBlock, setSelectedBlock] = useState({});
 
   const createPanes = (initialData) => {
     const { count } = initialData;
@@ -27,26 +25,6 @@ const Edit = (props) => {
     };
   };
 
-  React.useEffect(() => {
-    if (
-      isEmpty(data?.data?.blocks) &&
-      properties.blocks_layout.items[0] !== selectedBlock
-    ) {
-      setSelectedBlock(properties.blocks_layout.items[0]);
-      onChangeBlock(block, {
-        ...data,
-        data: properties,
-      });
-    }
-  }, [
-    onChangeBlock,
-    properties,
-    selectedBlock,
-    block,
-    data,
-    data?.data?.blocks,
-  ]);
-
   const blockState = {};
   const coldata = properties;
   const columnList = getColumns(coldata);
@@ -69,18 +47,27 @@ const Edit = (props) => {
           {columnList.map(([colId, column], index) => (
             <AccordionEdit isEditForm={pathname.includes('edit')}>
               <BlocksForm
+                key={colId}
                 metadata={metadata}
                 properties={isEmpty(column) ? emptyBlocksForm() : column}
                 manage={manage}
-                selectedBlock={selected ? selectedBlock : null}
-                allowedBlocks={data.allowedBlocks}
-                title={data.placeholder}
+                selectedBlock={selected ? selectedBlock[colId] : null}
                 description={data?.instructions?.data}
-                onSelectBlock={(id) => setSelectedBlock(id)}
+                onSelectBlock={(id) =>
+                  setSelectedBlock({
+                    [colId]: id,
+                  })
+                }
                 onChangeFormData={(newFormData) => {
                   onChangeBlock(block, {
                     ...data,
-                    data: newFormData,
+                    data: {
+                      ...coldata,
+                      blocks: {
+                        ...coldata.blocks,
+                        [colId]: newFormData,
+                      },
+                    },
                   });
                 }}
                 onChangeField={(id, value) => {
@@ -89,8 +76,14 @@ const Edit = (props) => {
                     onChangeBlock(block, {
                       ...data,
                       data: {
-                        ...data.data,
-                        ...blockState,
+                        ...coldata,
+                        blocks: {
+                          ...coldata.blocks,
+                          [colId]: {
+                            ...coldata.blocks?.[colId],
+                            ...blockState,
+                          },
+                        },
                       },
                     });
                   }

src/components/manage/Blocks/Accordion/View.jsx

@@ -1,18 +1,23 @@
 import React from 'react';
 import { RenderBlocks } from '@eeacms/volto-blocks-form/components';
+import { getColumns } from './util';
 import AccordionEdit from './AccordionEdit';
 const View = (props) => {
-  const { data } = props;
+  const {
+    data: { data = {} },
+  } = props;
+  const columnList = getColumns(data);
   const metadata = props.metadata || props.properties;
   return (
-    <AccordionEdit data={data}>
-      <RenderBlocks
-        {...props}
-        as={data?.as}
-        metadata={metadata}
-        content={data?.data || {}}
-      />
-    </AccordionEdit>
+    <div>
+      {columnList.map(([id, column], index) => {
+        return (
+          <AccordionEdit data={data}>
+            <RenderBlocks {...props} metadata={metadata} content={column} />
+          </AccordionEdit>
+        );
+      })}
+    </div>
   );
 };