From 926d823129ec084f22034f569581a5a2542a56bc Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Mon, 14 Oct 2024 16:28:25 +0000
Subject: [PATCH] Fix ColorInput label click not triggering correct input in
 playground (#5010)

Fixes: DASH-315
---
 .../src/app/connect/sign-in/components/ColorFormGroup.tsx      | 3 +--
 .../src/app/connect/sign-in/components/ColorInput/index.tsx    | 2 --
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/playground-web/src/app/connect/sign-in/components/ColorFormGroup.tsx b/apps/playground-web/src/app/connect/sign-in/components/ColorFormGroup.tsx
index 0cc3a2129cd..4ad281bbb57 100644
--- a/apps/playground-web/src/app/connect/sign-in/components/ColorFormGroup.tsx
+++ b/apps/playground-web/src/app/connect/sign-in/components/ColorFormGroup.tsx
@@ -64,14 +64,13 @@ export function ColorFormGroup(props: {
                 <div className="flex flex-col gap-2 pb-4">
                   {colorSection.colors.map((color) => {
                     return (
+                      // biome-ignore lint/a11y/noLabelWithoutControl: input is inside the label, so no need to add id
                       <label
                         className="flex cursor-pointer items-center gap-3 rounded-lg p-2 transition-colors hover:bg-secondary"
                         key={color.colorId}
-                        htmlFor="color-input"
                       >
                         <div className="rounded-full border">
                           <ColorInput
-                            id="color-input"
                             className="size-10"
                             value={themeObj.colors[color.colorId]}
                             onChange={(value) => {
diff --git a/apps/playground-web/src/app/connect/sign-in/components/ColorInput/index.tsx b/apps/playground-web/src/app/connect/sign-in/components/ColorInput/index.tsx
index 599019fc086..8905f2a14ef 100644
--- a/apps/playground-web/src/app/connect/sign-in/components/ColorInput/index.tsx
+++ b/apps/playground-web/src/app/connect/sign-in/components/ColorInput/index.tsx
@@ -7,7 +7,6 @@ export function ColorInput(props: {
   onChange: (value: string) => void;
   onClick?: () => void;
   className?: string;
-  id?: string;
 }) {
   const debouncedOnChange = useDebouncedCallback((value) => {
     props.onChange(value);
@@ -15,7 +14,6 @@ export function ColorInput(props: {
 
   return (
     <input
-      id={props.id}
       onChange={(e) => {
         debouncedOnChange(e.target.value);
       }}