From cc3d71f13c0604406eda838344d99866dd94df39 Mon Sep 17 00:00:00 2001
From: Bakhtiiar Muzakparov <muzakparov@gmail.com>
Date: Wed, 29 Jan 2020 16:31:49 +0000
Subject: [PATCH] Fix keyboard shortcut (#587)

* Fix keyboard shortcut

Co-authored-by: David Luzar <luzar.david@gmail.com>
---
 src/components/ToolButton.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/ToolButton.tsx b/src/components/ToolButton.tsx
index 6e401a02..14f4b972 100644
--- a/src/components/ToolButton.tsx
+++ b/src/components/ToolButton.tsx
@@ -1,6 +1,6 @@
 import "./ToolIcon.scss";
 
-import React from "react";
+import React, { useEffect } from "react";
 
 type ToolIconSize = "s" | "m";
 
@@ -30,10 +30,25 @@ export const ToolButton = React.forwardRef(function(
   props: ToolButtonProps,
   ref,
 ) {
-  const innerRef = React.useRef(null);
+  const innerRef = React.useRef<HTMLInputElement | HTMLButtonElement | null>(
+    null,
+  );
   React.useImperativeHandle(ref, () => innerRef.current);
   const sizeCn = `ToolIcon_size_${props.size || DEFAULT_SIZE}`;
 
+  const prevChecked = React.useRef<boolean>(
+    "checked" in props && props.checked,
+  );
+
+  useEffect(() => {
+    if (props.type !== "button") {
+      if (props.checked && !prevChecked.current && innerRef.current) {
+        innerRef.current.focus();
+      }
+      prevChecked.current = props.checked;
+    }
+  });
+
   if (props.type === "button")
     return (
       <button
@@ -42,7 +57,7 @@ export const ToolButton = React.forwardRef(function(
         aria-label={props["aria-label"]}
         type="button"
         onClick={props.onClick}
-        ref={innerRef}
+        ref={node => (innerRef.current = node)}
       >
         <div className="ToolIcon__icon" aria-hidden="true">
           {props.icon || props.label}
@@ -61,7 +76,7 @@ export const ToolButton = React.forwardRef(function(
         id={props.id}
         onChange={props.onChange}
         checked={props.checked}
-        ref={innerRef}
+        ref={node => (innerRef.current = node)}
       />
       <div className="ToolIcon__icon">{props.icon}</div>
     </label>