From ae58abcecb70f6200305f6e970a53247d70f9ebb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Thu, 1 Apr 2021 10:13:02 +0200
Subject: [PATCH] Adding search hotkey ctrl+shift+f

---
 webapp/src/components/viewHeader/viewHeaderSearch.tsx | 10 ++++++++--
 webapp/src/widgets/editable.tsx                       |  8 ++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/viewHeader/viewHeaderSearch.tsx b/webapp/src/components/viewHeader/viewHeaderSearch.tsx
index ddbd6936d..1ef3e007a 100644
--- a/webapp/src/components/viewHeader/viewHeaderSearch.tsx
+++ b/webapp/src/components/viewHeader/viewHeaderSearch.tsx
@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 import React, {useState, useRef, useEffect} from 'react'
 import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
+import {useHotkeys} from 'react-hotkeys-hook'
 
 import {BoardTree} from '../../viewModel/boardTree'
 import Button from '../../widgets/buttons/button'
@@ -13,7 +14,7 @@ type Props = {
     intl: IntlShape
 }
 
-const ViewHeaderSearch = React.memo((props: Props) => {
+const ViewHeaderSearch = (props: Props) => {
     const {boardTree, intl} = props
 
     const searchFieldRef = useRef<Editable>(null)
@@ -28,6 +29,11 @@ const ViewHeaderSearch = React.memo((props: Props) => {
         setSearchValue(boardTree.getSearchText())
     }, [boardTree])
 
+    useHotkeys('ctrl+shift+f', () => {
+        setIsSearching(true)
+        searchFieldRef.current?.focus(true)
+    })
+
     if (isSearching) {
         return (
             <Editable
@@ -57,6 +63,6 @@ const ViewHeaderSearch = React.memo((props: Props) => {
             />
         </Button>
     )
-})
+}
 
 export default injectIntl(ViewHeaderSearch)
diff --git a/webapp/src/widgets/editable.tsx b/webapp/src/widgets/editable.tsx
index 2308227af..ba12d090e 100644
--- a/webapp/src/widgets/editable.tsx
+++ b/webapp/src/widgets/editable.tsx
@@ -24,11 +24,15 @@ export default class Editable extends React.Component<Props> {
         return true
     }
 
-    public focus(): void {
+    public focus(selectAll = false): void {
         if (this.elementRef.current) {
             const valueLength = this.elementRef.current.value.length
             this.elementRef.current.focus()
-            this.elementRef.current.setSelectionRange(valueLength, valueLength)
+            if (selectAll) {
+                this.elementRef.current.setSelectionRange(0, valueLength)
+            } else {
+                this.elementRef.current.setSelectionRange(valueLength, valueLength)
+            }
         }
     }