From 7b4f38965ed2d05744a0b3eec36786fe1a82c6e1 Mon Sep 17 00:00:00 2001
From: canove <cassio@economicros.com.br>
Date: Thu, 14 Jan 2021 21:16:28 -0300
Subject: [PATCH] improvement: show queue color picker on focus

---
 frontend/src/components/ColorPicker/index.js |  1 +
 frontend/src/components/QueueModal/index.js  | 11 +++++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ColorPicker/index.js b/frontend/src/components/ColorPicker/index.js
index 0f9e0ba..fb6c825 100644
--- a/frontend/src/components/ColorPicker/index.js
+++ b/frontend/src/components/ColorPicker/index.js
@@ -8,6 +8,7 @@ const ColorPicker = ({ onChange, currentColor, handleClose, open }) => {
 
 	const handleChange = color => {
 		setColor(color.hex);
+		handleClose();
 	};
 
 	return (
diff --git a/frontend/src/components/QueueModal/index.js b/frontend/src/components/QueueModal/index.js
index 95d84b2..b86580a 100644
--- a/frontend/src/components/QueueModal/index.js
+++ b/frontend/src/components/QueueModal/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 
 import * as Yup from "yup";
 import { Formik, Form, Field } from "formik";
@@ -74,6 +74,7 @@ const QueueModal = ({ open, onClose, queueId }) => {
 
 	const [colorPickerModalOpen, setColorPickerModalOpen] = useState(false);
 	const [queue, setQueue] = useState(initialState);
+	const greetingRef = useRef();
 
 	useEffect(() => {
 		(async () => {
@@ -154,7 +155,12 @@ const QueueModal = ({ open, onClose, queueId }) => {
 									label={i18n.t("queueModal.form.color")}
 									name="color"
 									id="color"
-									// disabled
+									onFocus={() => {
+										setColorPickerModalOpen(true);
+										greetingRef.current.focus();
+									}}
+									error={touched.color && Boolean(errors.color)}
+									helperText={touched.color && errors.color}
 									InputProps={{
 										startAdornment: (
 											<InputAdornment position="start">
@@ -193,6 +199,7 @@ const QueueModal = ({ open, onClose, queueId }) => {
 										label={i18n.t("queueModal.form.greetingMessage")}
 										type="greetingMessage"
 										multiline
+										inputRef={greetingRef}
 										rows={5}
 										fullWidth
 										name="greetingMessage"