fix bug with lost focus for hotKeys

@@ -1,11 +1,12 @@import React, { useContext } from "react";import ReactDOM from "react-dom";import { useRouter } from "next/router";import { HotKeys, configure } from "react-hotkeys";import { Context } from "../components/context";configure({  ignoreTags: [],  //logLevel: "debug",  logLevel: "debug",  /* below is workaround for bug in react-hotkeys   "[BUG] typing a space in <input /> will disable all hotkeys in that <input /> #237"   causing hotkeys to after pressing a whitespace character (space, enter,..) 

@@ -36,6 +37,13 @@ const HotKeysMapping = props => {  const { state, dispatch } = useContext(Context);  const router = useRouter();  const autofocus = el => {    const found = ReactDOM.findDOMNode(el);    if (found && !state.edit) {      found.focus();    }  };  const handlers = {    RESET: event => dispatch({ type: "NEW_TIMER" }),    ADD_LOG: event => {

@@ -83,7 +91,7 @@ const HotKeysMapping = props => {  };  return (    <HotKeys keyMap={keyMap} handlers={handlers}>    <HotKeys keyMap={keyMap} handlers={handlers} ref={autofocus}>      {props.children}    </HotKeys>  );

@@ -27,15 +27,14 @@ const Entry = ({ entry, removeEntry, isSelected }) => {      }    });    dispatch({ type: "TOGGLE_EDITION", edit: false, submited: true });  };  useEffect(() => {    if (isSelected == entry.id)    {    focusedEntry.current.focus();    focusedEntry.current.scrollIntoView({ behavior: "smooth" });    if (isSelected == entry.id) {      focusedEntry.current.focus();      focusedEntry.current.scrollIntoView({ behavior: "smooth" });    }  });  const higlight =    isSelected == entry.id      ? {

@@ -57,7 +56,6 @@ const Entry = ({ entry, removeEntry, isSelected }) => {          <EntryNote>            <EntryNoteInput              name="note"              // defaultValue={entry.note || ""}              ref={register}              autoFocus              value={state.log.find(x => x.id == entry.id).note || ""}

@@ -7,7 +7,7 @@ import "react-toastify/dist/ReactToastify.css";import { ContextProvider } from "../components/context";import HotKeysMapping from "../components/HotKeysMapping"import HotKeysMapping from "../components/HotKeysMapping";import L10n from "../components/l10n";import Sidebar from "../components/sidebar";import { theme } from "../site.config";

@@ -24,7 +24,7 @@ class MyApp extends App {            <ToastContainer position={toast.POSITION.TOP_RIGHT} />            <L10n />            <TransitionGroup component={null}>              <CSSTransition              {/*}  <CSSTransition                     //Transitions are causing hotKeys to loose focus                key={this.props.router.route}                appear                timeout={{

@@ -34,10 +34,10 @@ class MyApp extends App {                }}                classNames="page-transition"              >                <Transition>                  <Component {...pageProps} />                </Transition>              </CSSTransition>              <Transition>*/}              <Component {...pageProps} />              {/*}   </Transition>              </CSSTransition>*/}            </TransitionGroup>            <Sidebar />          </HotKeysMapping>

@@ -1,4 +1,4 @@import React, { useContext, useEffect, useRef } from "react";import React, { useContext } from "react";import styled, { keyframes } from "styled-components";import Page from "../components/page";

@@ -7,12 +7,8 @@ import strings from "../l10n/about";const About = () => {  const { state } = useContext(Context);  const refToMain = useRef(null);  strings.setLanguage(state.language);  useEffect(() => {    refToMain.current.focus();  });    return (    <Page title="About">      <GitHubLink

@@ -30,7 +26,6 @@ const About = () => {            href="https://www.isaacbythewood.com/"            target="_blank"            rel="noopener noreferrer"            ref={refToMain}          >            {strings.name}          </Creator>

@@ -12,12 +12,6 @@ import { timeString } from "../utils/time";const Log = () => {  const { state, dispatch } = useContext(Context);  const [filter, setFilter] = useState({ type: "SHOW_ALL" });  const refToMain = useRef(null);  useEffect(() => {    if (!state.edit && state.logSelectedEntry==='')     refToMain.current.focus();  });  strings.setLanguage(state.language);

@@ -83,8 +77,7 @@ const Log = () => {          className={            getVisibleEntries(state.log, filter).length === 0 && "empty"          }         tabIndex="1"         ref={refToMain}          tabIndex="1"        >          {getTags(state.log).length > 0 && (            <TopBar>