From 4977646a4c8d7a5dff80323099b2aae801af2311 Mon Sep 17 00:00:00 2001
From: Victor Fernandez de Alba <sneridagh@gmail.com>
Date: Thu, 5 Dec 2024 12:42:13 +0100
Subject: [PATCH 1/2] [components] Fix color picker usability

---
 .../components/ColorPicker/ColorPicker.stories.tsx  | 13 ++++++++++++-
 .../src/components/ColorPicker/ColorPicker.tsx      |  9 ++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/ColorPicker/ColorPicker.stories.tsx b/packages/components/src/components/ColorPicker/ColorPicker.stories.tsx
index 1f94cc3a6c..686b2dd859 100644
--- a/packages/components/src/components/ColorPicker/ColorPicker.stories.tsx
+++ b/packages/components/src/components/ColorPicker/ColorPicker.stories.tsx
@@ -14,11 +14,22 @@ const meta = {
   tags: ['autodocs'],
 } satisfies Meta<typeof ColorPicker>;
 
+const ColorPickerStory = (args: any) => {
+  const [color, setColor] = React.useState(args.defaultValue);
+
+  return (
+    <>
+      <ColorPicker {...args} value={color} onChange={setColor} />
+      The color is: {color.toString('hex')}
+    </>
+  );
+};
+
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  render: (args: any) => <ColorPicker {...args} />,
+  render: ColorPickerStory,
 };
 
 Default.args = {
diff --git a/packages/components/src/components/ColorPicker/ColorPicker.tsx b/packages/components/src/components/ColorPicker/ColorPicker.tsx
index 4bedc19b43..f8bed1f0bd 100644
--- a/packages/components/src/components/ColorPicker/ColorPicker.tsx
+++ b/packages/components/src/components/ColorPicker/ColorPicker.tsx
@@ -35,7 +35,14 @@ export function ColorPicker({ label, children, ...props }: ColorPickerProps) {
                   yChannel="brightness"
                 />
                 <ColorSlider colorSpace="hsb" channel="hue" />
-                <ColorField label="Hex" />
+                <ColorField
+                  label="Hex"
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.currentTarget.blur();
+                    }
+                  }}
+                />
               </>
             )}
           </Dialog>

From 9c4499d5575f29895b75fe156b87f08b205c1a71 Mon Sep 17 00:00:00 2001
From: Victor Fernandez de Alba <sneridagh@gmail.com>
Date: Thu, 5 Dec 2024 12:43:05 +0100
Subject: [PATCH 2/2] Changelog

---
 packages/components/news/6512.bugfix | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 packages/components/news/6512.bugfix

diff --git a/packages/components/news/6512.bugfix b/packages/components/news/6512.bugfix
new file mode 100644
index 0000000000..82fc7a1f61
--- /dev/null
+++ b/packages/components/news/6512.bugfix
@@ -0,0 +1 @@
+Fix color picker usability. @sneridagh