From 4789d205386f589c3556df32700df25ad078904f Mon Sep 17 00:00:00 2001
From: Bartholomew <mackintosh02@gmail.com>
Date: Thu, 26 Nov 2020 13:54:41 +0100
Subject: [PATCH] fix: list markdown widgets (#4492)

---
 .../src/ListControl.js                        | 20 +++++++++----------
 .../__snapshots__/ListControl.spec.js.snap    |  8 ++++----
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/packages/netlify-cms-widget-list/src/ListControl.js b/packages/netlify-cms-widget-list/src/ListControl.js
index 422b0c53..5dca1212 100644
--- a/packages/netlify-cms-widget-list/src/ListControl.js
+++ b/packages/netlify-cms-widget-list/src/ListControl.js
@@ -321,13 +321,12 @@ export default class ListControl extends React.Component {
     };
   }
 
-  handleRemove = (index, key, event) => {
+  handleRemove = (index, event) => {
     event.preventDefault();
-    const { itemsCollapsed, keys } = this.state;
+    const { itemsCollapsed } = this.state;
     const { value, metadata, onChange, field, clearFieldErrors } = this.props;
     const collectionName = field.get('name');
     const isSingleField = this.getValueType() === valueTypes.SINGLE;
-    const validations = this.validations;
 
     const metadataRemovePath = isSingleField ? value.get(index) : value.get(index).valueSeq();
     const parsedMetadata =
@@ -336,17 +335,16 @@ export default class ListControl extends React.Component {
         : metadata;
 
     itemsCollapsed.splice(index, 1);
-    keys.splice(index, 1);
+    // clear validations
+    this.validations = [];
 
-    this.setState({ itemsCollapsed: [...itemsCollapsed], keys: [...keys] });
+    this.setState({
+      itemsCollapsed: [...itemsCollapsed],
+      keys: Array.from({ length: value.size - 1 }, () => uuid()),
+    });
 
     onChange(value.remove(index), parsedMetadata);
     clearFieldErrors();
-
-    // Remove deleted item object validation
-    if (validations) {
-      this.validations = validations.filter(item => item.key !== key);
-    }
   };
 
   handleItemCollapseToggle = (index, event) => {
@@ -490,7 +488,7 @@ export default class ListControl extends React.Component {
         <StyledListItemTopBar
           collapsed={collapsed}
           onCollapseToggle={partial(this.handleItemCollapseToggle, index)}
-          onRemove={partial(this.handleRemove, index, key)}
+          onRemove={partial(this.handleRemove, index)}
           dragHandleHOC={SortableHandle}
           data-testid={`styled-list-item-top-bar-${key}`}
         />
diff --git a/packages/netlify-cms-widget-list/src/__tests__/__snapshots__/ListControl.spec.js.snap b/packages/netlify-cms-widget-list/src/__tests__/__snapshots__/ListControl.spec.js.snap
index 3bbfd45f..291cb2d1 100644
--- a/packages/netlify-cms-widget-list/src/__tests__/__snapshots__/ListControl.spec.js.snap
+++ b/packages/netlify-cms-widget-list/src/__tests__/__snapshots__/ListControl.spec.js.snap
@@ -689,7 +689,7 @@ exports[`ListControl should remove from list when remove button is clicked 2`] =
         <mock-list-item-top-bar
           classname="css-1e1b0lr-StyledListItemTopBar e14bfka81"
           collapsed="true"
-          data-testid="styled-list-item-top-bar-1"
+          data-testid="styled-list-item-top-bar-2"
         >
           <button>
             Remove
@@ -703,12 +703,12 @@ exports[`ListControl should remove from list when remove button is clicked 2`] =
         <mock-object-control
           classnamewrapper="classNameWrapper css-1pznrxi"
           collapsed="true"
-          data-testid="object-control-1"
+          data-testid="object-control-2"
           field="Map { \\"name\\": \\"list\\", \\"label\\": \\"List\\", \\"collapsed\\": false, \\"minimize_collapsed\\": true, \\"fields\\": List [ Map { \\"label\\": \\"String\\", \\"name\\": \\"string\\", \\"widget\\": \\"string\\" } ] }"
           fieldserrors="Map {}"
           forlist="true"
-          parentids="forID,1"
-          validationkey="1"
+          parentids="forID,2"
+          validationkey="2"
           value="Map { \\"string\\": \\"item 2\\" }"
         />
       </div>