fix(form): pick correct root element in serialize

Pick the correct root element for references

Author: kylef

packages/form-serializer/lib/serializeForm.js

@@ -10,16 +10,18 @@ function collectElementByIDs(element) {
   }
 
   const { parents } = element;
-  if (parents) {
-    const rootElement = parents.get(0);
-
-    if (rootElement) {
-      rootElement.recursiveChildren.forEach((element) => {
-        if (element.id) {
-          dataStructures[element.id.toValue()] = element;
-        }
-      });
-    }
+  if (!parents || parents.isEmpty) {
+    return dataStructures;
+  }
+
+  const rootElement = parents.get(parents.length - 1);
+
+  if (rootElement) {
+    rootElement.recursiveChildren.forEach((element) => {
+      if (element.id) {
+        dataStructures[element.id.toValue()] = element;
+      }
+    });
   }
 
   return dataStructures;

packages/form-serializer/test/serializeForm-test.js

@@ -26,7 +26,9 @@ describe('#serializeForm', () => {
       new namespace.elements.Category([
         new namespace.elements.String('Hello world', { id: 'message' }),
       ], { classes: ['dataStructures'] }),
-      element,
+      new namespace.elements.Category([
+        element,
+      ]),
     ]).freeze();
 
     expect(serializeForm({ api: element, mediaType: 'multipart/form-data' })).to.equal('--BOUNDARY\r\nContent-Disposition: form-data; name="undefined"\r\n\r\nHello world\r\n--BOUNDARY--\r\n');