Array items now have unique, stable keys (#1046)

docs/advanced-customization.md

@@ -112,6 +112,7 @@ The following props are part of each element in `items`:
 - `hasRemove`: A boolean value stating whether the array item can be removed.
 - `hasToolbar`: A boolean value stating whether the array item has a toolbar.
 - `index`: A number stating the index the array item occurs in `items`.
+- `key`: A stable, unique key for the array item.
 - `onDropIndexClick: (index) => (event) => void`: Returns a function that removes the item at `index`.
 - `onReorderClick: (index, newIndex) => (event) => void`: Returns a function that swaps the items at `index` with `newIndex`.
 - `readonly`: A boolean value stating if the array item is read-only.

package.json

@@ -50,7 +50,8 @@
     "lodash.pick": "^4.4.0",
     "lodash.topath": "^4.5.2",
     "prop-types": "^15.5.8",
-    "react-is": "^16.8.4"
+    "react-is": "^16.8.4",
+    "shortid": "^2.2.14"
   },
   "devDependencies": {
     "@babel/cli": "^7.4.4",

src/components/fields/ArrayField.js

@@ -18,6 +18,7 @@ import {
   toIdSchema,
   getDefaultRegistry,
 } from "../../utils";
+import shortid from "shortid";
 
 function ArrayFieldTitle({ TitleField, idSchema, title, required }) {
   if (!title) {
@@ -174,6 +175,25 @@ function DefaultNormalArrayFieldTemplate(props) {
   );
 }
 
+function generateRowId() {
+  return shortid.generate();
+}
+
+function generateKeyedFormData(formData) {
+  return !Array.isArray(formData)
+    ? []
+    : formData.map(item => {
+        return {
+          key: generateRowId(),
+          item,
+        };
+      });
+}
+
+function keyedToPlainFormData(keyedFormData) {
+  return keyedFormData.map(keyedItem => keyedItem.item);
+}
+
 class ArrayField extends Component {
   static defaultProps = {
     uiSchema: {},
@@ -185,6 +205,51 @@ class ArrayField extends Component {
     autofocus: false,
   };
 
+  constructor(props) {
+    super(props);
+    const { formData } = props;
+    const keyedFormData = generateKeyedFormData(formData);
+    this.state = {
+      keyedFormData,
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const nextFormData = nextProps.formData;
+    const previousKeyedFormData = this.state.keyedFormData;
+    const newKeyedFormData =
+      nextFormData.length === previousKeyedFormData.length
+        ? previousKeyedFormData.map((previousKeyedFormDatum, index) => {
+            return {
+              key: previousKeyedFormDatum.key,
+              item: nextFormData[index],
+            };
+          })
+        : generateKeyedFormData(nextFormData);
+    this.setState({
+      keyedFormData: newKeyedFormData,
+    });
+  }
+
+  /*
+  // React 16.3 replaces componentWillReceiveProps with getDerivedStateFromProps
+  //
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const nextFormData = nextProps.formData;
+    const previousKeyedFormData = prevState.keyedFormData;
+    const newKeyedFormData = (nextFormData.length === previousKeyedFormData.length) ?
+      previousKeyedFormData.map((previousKeyedFormDatum, index) => {
+        return {
+          key: previousKeyedFormDatum.key,
+          item: nextFormData[index]
+        };
+      }) : generateKeyedFormData(nextFormData);
+    return {
+      keyedFormData: newKeyedFormData
+    };
+  }
+  */
+
   get itemTitle() {
     const { schema } = this.props;
     return schema.items.title || schema.items.description || "Item";
@@ -217,24 +282,40 @@ class ArrayField extends Component {
 
   onAddClick = event => {
     event.preventDefault();
-    const { schema, formData, registry = getDefaultRegistry() } = this.props;
+    const { schema, registry = getDefaultRegistry(), onChange } = this.props;
     const { definitions } = registry;
     let itemSchema = schema.items;
     if (isFixedItems(schema) && allowAdditionalItems(schema)) {
       itemSchema = schema.additionalItems;
     }
-    this.props.onChange([
-      ...formData,
-      getDefaultFormState(itemSchema, undefined, definitions),
-    ]);
+    const newFormDataRow = getDefaultFormState(
+      itemSchema,
+      undefined,
+      definitions
+    );
+    const newKeyedFormData = [
+      ...this.state.keyedFormData,
+      {
+        key: generateRowId(),
+        item: newFormDataRow,
+      },
+    ];
+
+    this.setState(
+      {
+        keyedFormData: newKeyedFormData,
+      },
+      () => onChange(keyedToPlainFormData(newKeyedFormData))
+    );
   };
 
   onDropIndexClick = index => {
     return event => {
       if (event) {
         event.preventDefault();
       }
-      const { formData, onChange } = this.props;
+      const { onChange } = this.props;
+      const { keyedFormData } = this.state;
       // refs #195: revalidate to ensure properly reindexing errors
       let newErrorSchema;
       if (this.props.errorSchema) {
@@ -249,7 +330,13 @@ class ArrayField extends Component {
           }
         }
       }
-      onChange(formData.filter((_, i) => i !== index), newErrorSchema);
+      const newKeyedFormData = keyedFormData.filter((_, i) => i !== index);
+      this.setState(
+        {
+          keyedFormData: newKeyedFormData,
+        },
+        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+      );
     };
   };
 
@@ -259,7 +346,7 @@ class ArrayField extends Component {
         event.preventDefault();
         event.target.blur();
       }
-      const { formData, onChange } = this.props;
+      const { onChange } = this.props;
       let newErrorSchema;
       if (this.props.errorSchema) {
         newErrorSchema = {};
@@ -275,18 +362,24 @@ class ArrayField extends Component {
         }
       }
 
+      const { keyedFormData } = this.state;
       function reOrderArray() {
         // Copy item
-        let newFormData = formData.slice();
+        let _newKeyedFormData = keyedFormData.slice();
 
         // Moves item from index to newIndex
-        newFormData.splice(index, 1);
-        newFormData.splice(newIndex, 0, formData[index]);
+        _newKeyedFormData.splice(index, 1);
+        _newKeyedFormData.splice(newIndex, 0, keyedFormData[index]);
 
-        return newFormData;
+        return _newKeyedFormData;
       }
-
-      onChange(reOrderArray(), newErrorSchema);
+      const newKeyedFormData = reOrderArray();
+      this.setState(
+        {
+          keyedFormData: newKeyedFormData,
+        },
+        () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema)
+      );
     };
   };
 
@@ -367,7 +460,8 @@ class ArrayField extends Component {
     const itemsSchema = retrieveSchema(schema.items, definitions);
     const arrayProps = {
       canAdd: this.canAddItem(formData),
-      items: formData.map((item, index) => {
+      items: this.state.keyedFormData.map((keyedItem, index) => {
+        const { key, item } = keyedItem;
         const itemSchema = retrieveSchema(schema.items, definitions, item);
         const itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
         const itemIdPrefix = idSchema.$id + "_" + index;
@@ -379,6 +473,7 @@ class ArrayField extends Component {
           idPrefix
         );
         return this.renderArrayFieldItem({
+          key,
           index,
           canMoveUp: index > 0,
           canMoveDown: index < formData.length - 1,
@@ -597,6 +692,7 @@ class ArrayField extends Component {
 
   renderArrayFieldItem(props) {
     const {
+      key,
       index,
       canRemove = true,
       canMoveUp = true,
@@ -658,6 +754,7 @@ class ArrayField extends Component {
       hasMoveDown: has.moveDown,
       hasRemove: has.remove,
       index,
+      key,
       onDropIndexClick: this.onDropIndexClick,
       onReorderClick: this.onReorderClick,
       readonly,