[sitecore-jss] Fix undefined fields from event overriding layout data

CHANGELOG.md

@@ -13,7 +13,7 @@ Our versioning strategy is as follows:
 
 ### 🎉 New Features & Improvements
 
-* `[nextjs][sitecore-jss-nextjs]` Support for Component Library feature in XMCloud ([#1987](https://github.com/Sitecore/jss/pull/1987)[#2000](https://github.com/Sitecore/jss/pull/2000))
+* `[nextjs][sitecore-jss-nextjs]` Support for Component Library feature in XMCloud ([#1987](https://github.com/Sitecore/jss/pull/1987)[#2000](https://github.com/Sitecore/jss/pull/2000)[#2002](https://github.com/Sitecore/jss/pull/2002))
 
 ### 🐛 Bug Fixes
 

packages/sitecore-jss/src/editing/utils.test.ts

@@ -212,6 +212,24 @@ describe('component library utils', () => {
       expect(changedComponent.params).to.deep.equal(expectedParams);
     });
 
+    it('should not update fields or params when update fields and params are undefined', () => {
+      const changedComponent = JSON.parse(JSON.stringify(testComponent));
+      changedComponent.fields = undefined;
+      changedComponent.params = undefined;
+      const message = new MessageEvent('message', {
+        origin: 'http://localhost',
+        data: {
+          name: 'component:update',
+          details: {
+            uid: 'test-content',
+          },
+        },
+      });
+      updateComponentHandler(message, changedComponent);
+      expect(changedComponent.fields).to.be.undefined;
+      expect(changedComponent.params).to.be.undefined;
+    });
+
     it('should debug log when component not found', () => {
       const message = new MessageEvent('message', {
         origin: 'http://localhost',

packages/sitecore-jss/src/editing/utils.ts

@@ -257,13 +257,17 @@ export const updateComponentHandler = (
 
   if (updateComponent) {
     console.debug(
-      'Found rendering with uid %s to update. Updating with fields %o and params %o',
+      'Found component with uid %s to update. Update fields: %o. Update params: %o.',
       eventArgs.details.uid,
       eventArgs.details.fields,
       eventArgs.details.params
     );
-    updateComponent.fields = { ...updateComponent.fields, ...eventArgs.details.fields };
-    updateComponent.params = { ...updateComponent.params, ...eventArgs.details.params };
+    if (eventArgs.details.fields) {
+      updateComponent.fields = { ...updateComponent.fields, ...eventArgs.details.fields };
+    }
+    if (eventArgs.details.params) {
+      updateComponent.params = { ...updateComponent.params, ...eventArgs.details.params };
+    }
     if (successCallback) successCallback(rootComponent);
   } else {
     console.debug('Rendering with uid %s not found', eventArgs.details.uid);

packages/sitecore-jss/src/test-data/component-editing-data.ts

@@ -1,4 +1,3 @@
-// default setup for placeholder-less component
 const contentBlock = {
   uid: 'test-content',
   componentName: 'ContentBlock',