Fix typing into color picker popup text field (#694)

Co-authored-by: David Luzar <luzar.david@gmail.com>

src/components/ColorPicker.tsx

@@ -4,6 +4,7 @@ import { Popover } from "./Popover";
 import "./ColorPicker.css";
 import { KEYS } from "../keys";
 import { t } from "../i18n";
+import { isWritableElement } from "../utils";
 
 // This is a narrow reimplementation of the awesome react-color Twitter component
 // https://github.com/casesandberg/react-color/blob/master/src/components/twitter/Twitter.js
@@ -39,8 +40,8 @@ const Picker = function({
     // focus on first input
     if (activeItem.current) {
       activeItem.current.focus();
-    } else if (firstItem.current) {
-      firstItem.current.focus();
+    } else if (colorInput.current) {
+      colorInput.current.focus();
     }
   }, []);
 
@@ -84,7 +85,10 @@ const Picker = function({
         (gallery!.current!.children![nextIndex] as any).focus();
       }
       e.preventDefault();
-    } else if (keyBindings.includes(e.key.toLowerCase())) {
+    } else if (
+      keyBindings.includes(e.key.toLowerCase()) &&
+      !isWritableElement(e.target)
+    ) {
       const index = keyBindings.indexOf(e.key.toLowerCase());
       (gallery!.current!.children![index] as any).focus();
       e.preventDefault();
@@ -200,6 +204,9 @@ const ColorInput = React.forwardRef(
           onPaste={e => onChange(e.clipboardData.getData("text"))}
           onBlur={() => setInnerValue(color)}
           ref={inputRef}
+          onFocus={e => {
+            e.target.select();
+          }}
         />
       </div>
     );