FIX #6193 : bind enter and tab key on color picker input to close color board (#6305)

This is done to improve the keyboard navigation on the property pane

Author: vibhandikyash

app/client/src/components/ads/ColorPickerComponent.tsx

@@ -151,6 +151,7 @@ interface ColorPickerProps {
 
 function ColorPickerComponent(props: ColorPickerProps) {
   const [color, setColor] = React.useState(props.color);
+  const [isOpen, setOpen] = React.useState(false);
   const debouncedOnChange = React.useCallback(
     debounce(props.changeColor, 500),
     [props.changeColor],
@@ -164,6 +165,7 @@ function ColorPickerComponent(props: ColorPickerProps) {
     <Popover
       enforceFocus={false}
       interactionKind={PopoverInteractionKind.CLICK}
+      isOpen={isOpen}
       minimal
       modifiers={{
         offset: {
@@ -176,22 +178,41 @@ function ColorPickerComponent(props: ColorPickerProps) {
       <StyledInputGroup
         leftIcon={
           color ? (
-            <ColorIcon color={color} />
+            <ColorIcon color={color} onClick={() => setOpen(true)} />
           ) : (
-            <NoColorIconWrapper>
+            <NoColorIconWrapper onClick={() => setOpen(true)}>
               <NoColorIcon>
                 <div className="line" />
               </NoColorIcon>
             </NoColorIconWrapper>
           )
         }
+        onBlur={() => {
+          // Case 1
+          // On Tab key press Input loses focus and onKeyUp handler is not called
+          // To handle Tab key press onBlur event is used instead
+          // As input will lose focus on Tab press
+          // Case 2
+          // if user clicks on ColorBoard blur is called first and color is not updated
+          // to prevent that make sure to wait for color update before onBlur
+          setTimeout(() => {
+            setOpen(false);
+          }, 100);
+        }}
         onChange={handleChangeColor}
+        onFocus={() => setOpen(true)}
+        onKeyUp={(e) => {
+          if (e.key === "Enter") {
+            setOpen((state) => !state);
+          }
+        }}
         placeholder="enter color name or hex"
         value={color}
       />
       <ColorBoard
         selectColor={(color) => {
           setColor(color);
+          setOpen(false);
           props.changeColor(color);
         }}
         selectedColor={color}