Solve issue: Layout field is not automatically filled

eea · Oct 12, 2020 · 20603e3 · 20603e3
1 parent 96f6b00
commit 20603e3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -140,8 +140,8 @@ class ColumnsBlockEdit extends React.Component {
     const prevCols = prevProps.data.data?.blocks_layout?.items || [];
 
     const colNumChanged = cols.length !== prevCols.length;
-    const notInitialLayoutSelection = prevCols.length !== 0;
-    const shouldUpdateLayout = colNumChanged && notInitialLayoutSelection;
+    const initialLayoutSelection = Object.keys(prevProps.data).length === 1;
+    const shouldUpdateLayout = colNumChanged && !initialLayoutSelection;
 
     if (shouldUpdateLayout) {
       const available_variants = variants.filter(

diff --git a/src/Widgets/LayoutSelectWidget.jsx b/src/Widgets/LayoutSelectWidget.jsx
@@ -92,17 +92,21 @@ export class LayoutSelectWidget extends Component {
     this.setState({
       selectedOption: {
         value: this.props.value,
-        label: this.props.choices.find((x) => x[0] === this.props.value)?.[1],
+        label: this.props.choices.find((x) =>
+          isEqual(x[0], this.props.value),
+        )?.[1],
       },
     });
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.value !== this.props.value) {
+    if (!isEqual(prevProps.value, this.props.value)) {
       this.setState({
         selectedOption: {
           value: this.props.value,
-          label: this.props.choices.find((x) => x[0] === this.props.value)?.[1],
+          label: this.props.choices.find((x) =>
+            isEqual(x[0], this.props.value),
+          )?.[1],
         },
       });
     }
@@ -114,7 +118,7 @@ export class LayoutSelectWidget extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const { id, choices, value, onChange } = this.props;
+    const { id, choices, onChange } = this.props;
 
     return (
       <FormFieldWrapper {...this.props}>