Adding search hotkey ctrl+shift+f

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)

webapp/src/widgets/editable.tsx

@@ -24,13 +24,17 @@ 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()
+            if (selectAll) {
+                this.elementRef.current.setSelectionRange(0, valueLength)
+            } else {
                 this.elementRef.current.setSelectionRange(valueLength, valueLength)
             }
         }
+    }
 
     public blur = (): void => {
         this.saveOnBlur = false