From 477f4b275d7addf1d51be2402bf3c5166930110d Mon Sep 17 00:00:00 2001
From: bymyself <abolkonsky.rem@gmail.com>
Date: Sun, 5 Jan 2025 11:05:09 -0700
Subject: [PATCH] Fix node bookmark color customization (#2168)

---
 browser_tests/menu.spec.ts                    | 41 +++++++++++++++++++
 src/components/common/CustomizationDialog.vue |  1 +
 2 files changed, 42 insertions(+)

diff --git a/browser_tests/menu.spec.ts b/browser_tests/menu.spec.ts
index edea25180..170e12531 100644
--- a/browser_tests/menu.spec.ts
+++ b/browser_tests/menu.spec.ts
@@ -292,6 +292,47 @@ test.describe('Menu', () => {
         }
       })
     })
+
+    test('Can customize bookmark color after interacting with color options', async ({
+      comfyPage
+    }) => {
+      // Open customization dialog
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
+      const tab = comfyPage.menu.nodeLibraryTab
+      await tab.getFolder('foo').click({ button: 'right' })
+      await comfyPage.page.getByLabel('Customize').click()
+
+      // Click a color option multiple times
+      const customColorOption = comfyPage.page.locator(
+        '.p-togglebutton-content > .pi-palette'
+      )
+      await customColorOption.click()
+      await customColorOption.click()
+
+      // Use the color picker
+      await comfyPage.page
+        .getByLabel('Customize Folder')
+        .getByRole('textbox')
+        .click()
+      await comfyPage.page.locator('.p-colorpicker-color-background').click()
+
+      // Finalize the customization
+      await comfyPage.page
+        .locator('.icon-field .p-selectbutton > *:nth-child(2)')
+        .click()
+      await comfyPage.page.getByLabel('Confirm').click()
+      await comfyPage.nextFrame()
+
+      // Verify the color selection is saved
+      const setting = await comfyPage.getSetting(
+        'Comfy.NodeLibrary.BookmarksCustomization'
+      )
+      await expect(setting).toHaveProperty(['foo/', 'color'])
+      await expect(setting['foo/'].color).not.toBeNull()
+      await expect(setting['foo/'].color).not.toBeUndefined()
+      await expect(setting['foo/'].color).not.toBe('')
+    })
+
     test('Can rename customized bookmark folder', async ({ comfyPage }) => {
       await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', ['foo/'])
       await comfyPage.setSetting('Comfy.NodeLibrary.BookmarksCustomization', {
diff --git a/src/components/common/CustomizationDialog.vue b/src/components/common/CustomizationDialog.vue
index eb1d38afc..aa79751e1 100644
--- a/src/components/common/CustomizationDialog.vue
+++ b/src/components/common/CustomizationDialog.vue
@@ -26,6 +26,7 @@
             :options="colorOptions"
             optionLabel="name"
             dataKey="value"
+            :allow-empty="false"
           >
             <template #option="slotProps">
               <div