From ca3fdb9c6ce9e2a53ccee281a7c0adcd31ea8940 Mon Sep 17 00:00:00 2001
From: navedqb <naved@qburst.com>
Date: Thu, 11 Jul 2024 14:17:05 +0530
Subject: [PATCH] fix: enable label click to open colorpicker

---
 apps/showcase/doc/common/apidoc/index.json         | 8 ++++++++
 packages/primevue/src/colorpicker/ColorPicker.d.ts | 4 ++++
 packages/primevue/src/colorpicker/ColorPicker.vue  | 6 +++---
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/apps/showcase/doc/common/apidoc/index.json b/apps/showcase/doc/common/apidoc/index.json
index c57329d7f..bba598b86 100644
--- a/apps/showcase/doc/common/apidoc/index.json
+++ b/apps/showcase/doc/common/apidoc/index.json
@@ -10598,6 +10598,14 @@
                             "type": "boolean",
                             "default": "false",
                             "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the focus input to match a label defined for the dropdown."
                         }
                     ],
                     "methods": []
diff --git a/packages/primevue/src/colorpicker/ColorPicker.d.ts b/packages/primevue/src/colorpicker/ColorPicker.d.ts
index cfa2997da..edc17a2bc 100755
--- a/packages/primevue/src/colorpicker/ColorPicker.d.ts
+++ b/packages/primevue/src/colorpicker/ColorPicker.d.ts
@@ -201,6 +201,10 @@ export interface ColorPickerProps {
      * @defaultValue false
      */
     unstyled?: boolean;
+    /**
+     * Identifier of the focus input to match a label defined for the dropdown.
+     */
+    inputId?: string | undefined;
 }
 
 export interface ColorPickerSlots {}
diff --git a/packages/primevue/src/colorpicker/ColorPicker.vue b/packages/primevue/src/colorpicker/ColorPicker.vue
index 968a66be4..beb73264f 100755
--- a/packages/primevue/src/colorpicker/ColorPicker.vue
+++ b/packages/primevue/src/colorpicker/ColorPicker.vue
@@ -1,6 +1,6 @@
 <template>
     <div ref="container" :class="cx('root')" v-bind="ptmi('root')">
-        <input v-if="!inline" ref="input" type="text" :class="cx('preview')" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" v-bind="ptm('preview')" />
+        <input v-if="!inline" ref="input" :id="inputId" type="text" :class="cx('preview')" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" v-bind="ptm('preview')" />
         <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
                 <div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="[cx('panel'), panelClass]" @click="onOverlayClick" v-bind="ptm('panel')">
@@ -21,9 +21,9 @@
 </template>
 
 <script>
-import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
-import { relativePosition, absolutePosition, addClass, removeClass, isTouchDevice } from '@primeuix/utils/dom';
+import { absolutePosition, addClass, isTouchDevice, relativePosition, removeClass } from '@primeuix/utils/dom';
 import { ZIndex } from '@primeuix/utils/zindex';
+import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import BaseColorPicker from './BaseColorPicker.vue';