From 965cc737e6cc33d39268c524e0a69329dbf4dbb6 Mon Sep 17 00:00:00 2001
From: Tim Hojnoski <timhojnoski@gmail.com>
Date: Mon, 13 Nov 2023 16:03:18 -0500
Subject: [PATCH] fix(Button): support re patching prefix after undefined

---
 .../src/components/Button/Button.js              |  4 ++--
 .../src/components/Button/Button.test.js         | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/@lightningjs/ui-components/src/components/Button/Button.js b/packages/@lightningjs/ui-components/src/components/Button/Button.js
index 66555c49d..5af6bf4ef 100644
--- 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,9 +129,7 @@ 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();
@@ -138,6 +137,7 @@ export default class Button extends Surface {
     } 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
index 152e45f9b..2deaa25d2 100644
--- 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', () => {