From b8739915b227bae2742c20b589c2b1b537a3d22e Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 6 Apr 2020 13:59:08 +0100
Subject: [PATCH 1/2] Lots of smaller fixes found in the console logs during
 testing.

---
 src/components/App.jsx                 |  4 ++--
 src/components/fields/DocLabel.jsx     |  4 ++--
 src/components/filter/FilterEditor.jsx |  6 +++---
 src/components/inputs/StringInput.jsx  |  1 +
 src/components/layers/LayerIdBlock.jsx |  2 +-
 src/components/layers/LayerList.jsx    | 12 +++++++-----
 6 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/App.jsx b/src/components/App.jsx
index aabc06d..6a899e7 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -353,7 +353,7 @@ export default class App extends React.Component {
           parsed: {
             type: "layer",
             data: {
-              index,
+              index: parseInt(index, 10),
               key: "id",
               message,
             }
@@ -371,7 +371,7 @@ export default class App extends React.Component {
           parsed: {
             type: "layer",
             data: {
-              index,
+              index: parseInt(index, 10),
               key,
               message
             }
diff --git a/src/components/fields/DocLabel.jsx b/src/components/fields/DocLabel.jsx
index 5375fbb..e1543c7 100644
--- a/src/components/fields/DocLabel.jsx
+++ b/src/components/fields/DocLabel.jsx
@@ -9,8 +9,8 @@ export default class DocLabel extends React.Component {
       PropTypes.object,
       PropTypes.string
     ]).isRequired,
-    fieldSpec: PropTypes.object.isRequired,
-    onToggleDoc: PropTypes.func.isRequired,
+    fieldSpec: PropTypes.object,
+    onToggleDoc: PropTypes.func,
   }
 
   constructor (props) {
diff --git a/src/components/filter/FilterEditor.jsx b/src/components/filter/FilterEditor.jsx
index e11125b..b995157 100644
--- a/src/components/filter/FilterEditor.jsx
+++ b/src/components/filter/FilterEditor.jsx
@@ -223,7 +223,7 @@ export default class CombiningFilterEditor extends React.Component {
         const error = errors[`filter[${idx+1}]`];
 
         return (
-          <>
+          <div key={`block-${idx}`}>
             <FilterEditorBlock key={idx} onDelete={this.deleteFilterItem.bind(this, idx)}>
               <SingleFilterEditor
                 properties={this.props.properties}
@@ -232,9 +232,9 @@ export default class CombiningFilterEditor extends React.Component {
               />
             </FilterEditorBlock>
             {error &&
-              <div className="maputnik-inline-error">{error.message}</div>
+              <div key="error" className="maputnik-inline-error">{error.message}</div>
             }
-          </>
+          </div>
         );
       })
 
diff --git a/src/components/inputs/StringInput.jsx b/src/components/inputs/StringInput.jsx
index 5c6fa58..bf297e0 100644
--- a/src/components/inputs/StringInput.jsx
+++ b/src/components/inputs/StringInput.jsx
@@ -33,6 +33,7 @@ class StringInput extends React.Component {
         value: props.value
       };
     }
+    return {};
   }
 
   render() {
diff --git a/src/components/layers/LayerIdBlock.jsx b/src/components/layers/LayerIdBlock.jsx
index 120378d..74ff31b 100644
--- a/src/components/layers/LayerIdBlock.jsx
+++ b/src/components/layers/LayerIdBlock.jsx
@@ -10,7 +10,7 @@ class LayerIdBlock extends React.Component {
     value: PropTypes.string.isRequired,
     wdKey: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
-    error: PropTypes.object.isRequired,
+    error: PropTypes.object,
   }
 
   render() {
diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx
index b080a00..e856482 100644
--- a/src/components/layers/LayerList.jsx
+++ b/src/components/layers/LayerList.jsx
@@ -165,10 +165,12 @@ class LayerListContainer extends React.Component {
     return propsChanged;
   }
 
-  componentDidUpdate () {
-    const selectedItemNode = this.selectedItemRef.current;
-    if (selectedItemNode && selectedItemNode.node) {
-      selectedItemNode.node.scrollIntoView();
+  componentDidUpdate (prevProps) {
+    if (prevProps.selectedLayerIndex !== this.props.selectedLayerIndex) {
+      const selectedItemNode = this.selectedItemRef.current;
+      if (selectedItemNode && selectedItemNode.node) {
+        selectedItemNode.node.scrollIntoView();
+      }
     }
   }
 
@@ -184,7 +186,7 @@ class LayerListContainer extends React.Component {
       if(layers.length > 1) {
         const grp = <LayerListGroup
           data-wd-key={[groupPrefix, idx].join('-')}
-          key={`group-${groupPrefix}`}
+          key={`group-${groupPrefix}-${idx}`}
           title={groupPrefix}
           isActive={!this.isCollapsed(groupPrefix, idx) || idx === this.props.selectedLayerIndex}
           onActiveToggle={this.toggleLayerGroup.bind(this, groupPrefix, idx)}

From 44d1a7a6b07e129dedc8d9700d039a038c4448ca Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 6 Apr 2020 14:18:41 +0100
Subject: [PATCH 2/2] {arrayMove} will no longer be included in
 'react-sortable-hoc', move to array-move.

---
 package-lock.json      | 5 +++++
 package.json           | 1 +
 src/components/App.jsx | 2 +-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index abf32ab..2d5914b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2490,6 +2490,11 @@
         "is-string": "^1.0.5"
       }
     },
+    "array-move": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/array-move/-/array-move-2.2.1.tgz",
+      "integrity": "sha512-qQpEHBnVT6HAFgEVUwRdHVd8TYJThrZIT5wSXpEUTPwBaYhPLclw12mEpyUvRWVdl1VwPOqnIy6LqTFN3cSeUQ=="
+    },
     "array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
diff --git a/package.json b/package.json
index bac612c..65f8df1 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
     "@mapbox/mapbox-gl-style-spec": "^13.12.0",
     "@mdi/react": "^1.3.0",
+    "array-move": "^2.2.1",
     "classnames": "^2.2.6",
     "codemirror": "^5.52.0",
     "color": "^3.1.2",
diff --git a/src/components/App.jsx b/src/components/App.jsx
index 6a899e7..690c46e 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -4,7 +4,7 @@ import cloneDeep from 'lodash.clonedeep'
 import clamp from 'lodash.clamp'
 import get from 'lodash.get'
 import {unset} from 'lodash'
-import {arrayMove} from 'react-sortable-hoc'
+import arrayMove from 'array-move'
 import url from 'url'
 
 import MapboxGlMap from './map/MapboxGlMap'