fix(Button): support re patching prefix after undefined

rdkcentral · Nov 13, 2023 · 965cc73 · 965cc73
1 parent 34438a9
commit 965cc73
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/packages/@lightningjs/ui-components/src/components/Button/Button.js b/packages/@lightningjs/ui-components/src/components/Button/Button.js
@@ -105,6 +105,7 @@ export default class Button extends Surface {
   }
 
   _updatePrefix() {
+    const prefixString = JSON.stringify(this.prefix);
     if (this.prefix) {
       let prefixPatch = {
         style: {
@@ -128,16 +129,15 @@ export default class Button extends Surface {
        * from something else (ex. a change in mode), only update the styles applied to the
        * items in the Prefix (ex. updating the color to the value appropriate to the new mode).
        */
-      const prefixString = JSON.stringify(this.prefix);
       if (prefixString !== this._prevPrefix) {
-        this._prevPrefix = prefixString;
         this._Prefix.items = this._addButtonProps(this.prefix);
       } else {
         this._updatePrefixStyles();
       }
     } else {
       this._Content.patch({ Prefix: undefined });
     }
+    this._prevPrefix = prefixString;
   }
 
   _updatePrefixStyles() {

diff --git a/packages/@lightningjs/ui-components/src/components/Button/Button.test.js b/packages/@lightningjs/ui-components/src/components/Button/Button.test.js
@@ -150,6 +150,22 @@ describe('Button', () => {
       testRenderer.forceAllUpdates();
       expect(button._Prefix.items.length).toEqual(button.prefix.length);
     });
+
+    it('should render a new preix row when a prefix is toggled between undefined and defined', () => {
+      expect(button._Prefix).toBeUndefined();
+
+      button.prefix = [{ type: Icon }];
+      testRenderer.forceAllUpdates();
+      expect(button._Prefix.items.length).toEqual(button.prefix.length);
+
+      button.prefix = undefined;
+      testRenderer.forceAllUpdates();
+      expect(button._Prefix).toBeUndefined();
+
+      button.prefix = [{ type: Icon }];
+      testRenderer.forceAllUpdates();
+      expect(button._Prefix.items.length).toEqual(button.prefix.length);
+    });
   });
 
   describe('suffix', () => {