From de13f4ea11cf84b9c34c8f7954dc716fa5a1791f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 20 May 2024 14:50:39 +0100
Subject: [PATCH] Fix multiple issue with colour selection for options

---
 .../OptionSelectDnD/OptionSelectDnD.svelte    | 34 ++++++++++++-------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/packages/bbui/src/OptionSelectDnD/OptionSelectDnD.svelte b/packages/bbui/src/OptionSelectDnD/OptionSelectDnD.svelte
index 22d0fd03a0..09405325a6 100644
--- a/packages/bbui/src/OptionSelectDnD/OptionSelectDnD.svelte
+++ b/packages/bbui/src/OptionSelectDnD/OptionSelectDnD.svelte
@@ -9,8 +9,8 @@
 
   export let constraints
   export let optionColors = {}
-  let options = []
 
+  let options = []
   let colorPopovers = []
   let anchors = []
 
@@ -64,9 +64,14 @@
     delete optionColors[optionName]
   }
 
-  const openColorPickerPopover = (optionIdx, target) => {
-    colorPopovers[optionIdx].show()
-    anchors[optionIdx] = target
+  const openColorPickerPopover = optionIdx => {
+    for (let i = 0; i < colorPopovers.length; i++) {
+      if (i === optionIdx) {
+        colorPopovers[i].show()
+      } else {
+        colorPopovers[i]?.hide()
+      }
+    }
   }
 
   onMount(() => {
@@ -94,7 +99,7 @@
     on:consider={handleDndConsider}
     on:finalize={handleDndFinalize}
   >
-    {#each options as option, idx (option.id)}
+    {#each options as option, idx (`${option.id}-${idx}`)}
       <div
         class="no-border action-container"
         animate:flip={{ duration: flipDurationMs }}
@@ -102,25 +107,24 @@
         <div class="child drag-handle-spacing">
           <Icon name="DragHandle" size="L" />
         </div>
-        <div class="child color-picker">
+        <div
+          bind:this={anchors[idx]}
+          class="child color-picker"
+          on:click={e => openColorPickerPopover(idx, e.target)}
+        >
           <div
-            id="color-picker"
-            bind:this={anchors[idx]}
+            class="circle"
             style="--color:{optionColors?.[option.name] ||
               'hsla(0, 1%, 50%, 0.3)'}"
-            class="circle"
-            on:click={e => openColorPickerPopover(idx, e.target)}
           >
             <Popover
               bind:this={colorPopovers[idx]}
               anchor={anchors[idx]}
               align="left"
               offset={0}
-              style=""
-              popoverTarget={document.getElementById(`color-picker`)}
               animate={false}
             >
-              <div class="colors">
+              <div class="colors" data-ignore-click-outside="true">
                 {#each colorsArray as color}
                   <div
                     on:click={() => handleColorChange(option.name, color, idx)}
@@ -228,6 +232,10 @@
     display: flex;
   }
 
+  .color-picker:hover {
+    cursor: pointer;
+  }
+
   .circle {
     height: 20px;
     width: 20px;