From 20603e313419ba00c626c9c738f3d95a618f14dd Mon Sep 17 00:00:00 2001
From: Silviu Bogan <silviubogan@gmail.com>
Date: Mon, 12 Oct 2020 15:24:49 +0300
Subject: [PATCH] Solve issue: Layout field is not automatically filled

---
 src/ColumnsBlock/ColumnsBlockEdit.jsx |  4 ++--
 src/Widgets/LayoutSelectWidget.jsx    | 12 ++++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
index 0ed7508..9fae0e0 100644
--- 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
index 35d9883..0ae6ad7 100644
--- 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}>