From eeb9f5e5ab9371c0316dbf1b671456e27fd8c166 Mon Sep 17 00:00:00 2001
From: Johannes Klauss <klauss.johannes@gmail.com>
Date: Sat, 4 Apr 2020 13:03:03 +0200
Subject: [PATCH] Added filter implementation based on the
 https://github.com/gagandeepgill PR.

---
 README.md           |  1 +
 docs/useHotkeys.mdx | 47 +++++++++++++++++++++++++++++----------------
 src/index.ts        | 14 ++++++++++++++
 3 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 4c9190b3..9474e83c 100644
--- a/README.md
+++ b/README.md
@@ -56,6 +56,7 @@ gets hit by the user. **Important:** Since version 1.5.0 this callback gets memo
 to do this anymore by yourself.
 - `options: Options = {}`
   - `filter: (event: KeyboardEvent): boolean` is used to enable hotkeys inside input elements. Check out [hotkeys docs](https://github.com/jaywcjlove/hotkeys/#filter) for usage
+  - * `enableOnTags: string[]` is used to enable listening to hotkeys in form fields. Available values are `INPUT`, `TEXTAREA` and `SELECT`. **IMPORTANT!** When you provide a custom `filter` implementation function this parameter will be ignored.
   - `splitKey: string` is used to change the splitting character inside the keys argument. Default is `+`, but if you want
     to listen to the `+` character, you can set `splitKey` to i.e. `-` and listen for `ctrl-+`
   - `keyup: boolean` Determine if you want to listen on the keyup event
diff --git a/docs/useHotkeys.mdx b/docs/useHotkeys.mdx
index 83f66ae2..98f5040c 100644
--- a/docs/useHotkeys.mdx
+++ b/docs/useHotkeys.mdx
@@ -69,11 +69,26 @@ for an overview.
 
 ### Parameters
 * `filter: (event: KeyboardEvent): boolean` is used to enable hotkeys inside input elements. Check out [hotkeys docs](https://github.com/jaywcjlove/hotkeys/#filter) for usage
+* `enableOnTags: string[]` is used to enable listening to hotkeys in form fields. Available values are `INPUT`, `TEXTAREA` and `SELECT`.
+**IMPORTANT!** When you provide a custom `filter` implementation function this parameter will be ignored.
 * `splitKey: string` is used to change the splitting character inside the keys argument. Default is `+`, but if you want
 to listen to the `+` character, you can set `splitKey` to i.e. `-` and listen for `ctrl-+`
 * `keyup: boolean` Determine if you want to listen on the keyup event
 * `keydown: boolean` Determine if want to listen on the keydown event
 
+<Playground>
+  {() => {
+    const [amount, setAmount] = useState(0);
+    useHotkeys('ctrl+t', () => setAmount(amount => amount + 100), {enableOnTags: ['INPUT']});
+    return (
+      <div>
+        <input type="text"/>
+        Add {amount} dollars to my bank account.
+      </div>
+    );
+  }}
+</Playground>
+
 ## Memoisation
 
 Let's check out a slightly different example to see how memoisation effects your application.
@@ -81,10 +96,10 @@ Let's check out a slightly different example to see how memoisation effects your
 <Playground>
   {() => {
     const [amount, setAmount] = useState(0);
-    useHotkeys('n', () => setAmount(amount + 100), []);
+    useHotkeys('n', () => setAmount(amount + 100));
     return (
       <div>
-        Add {Math.abs(amount)} dollars to my bank account.
+        Add {amount} dollars to my bank account.
       </div>
     );
   }}
@@ -106,10 +121,10 @@ the third parameter like so:
   {() => {
     const [amount, setAmount] = useState(0);
     // Works but has binding issues
-    useHotkeys('m', () => setAmount(amount + 100), [amount]);
+    useHotkeys('m', () => setAmount(amount + 100), {}, [amount]);
     return (
       <div>
-        Add {Math.abs(amount)} dollars to my bank account.
+        Add {amount} dollars to my bank account.
       </div>
     );
   }}
@@ -121,16 +136,14 @@ seem okay but can cause scoping problems and mess up the internals of our applic
 is that we do not execute everything all the time but wait for changes. To fix that we just have to use the callback
 approach for `setAmount` like in the very first example:
 
-```jsx
-const AddToBankComponent = () => {
-  const [amount, setAmount] = useState(0);
-
-  useHotkeys('m', () => setAmount(amount => amount + 100), []);
-
-  return (
-    <div>
-      Add {Math.abs(amount)} dollars to my bank account.
-    </div>
-  );
-};
-```
+<Playground>
+  {() => {
+    const [amount, setAmount] = useState(0);
+    useHotkeys('m', () => setAmount(amount => amount + 100));
+    return (
+      <div>
+        Add {amount} dollars to my bank account.
+      </div>
+    );
+  }}
+</Playground>
diff --git a/src/index.ts b/src/index.ts
index f54b38b7..38c60c70 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,8 +1,11 @@
 import hotkeys, {KeyHandler} from "hotkeys-js";
 import {useCallback, useEffect} from "react";
 
+type AvailableTags = 'INPUT' | 'TEXTAREA' | 'SELECT';
+
 type Options = {
   filter?: typeof hotkeys.filter;
+  enableOnTags?: AvailableTags[];
   splitKey?: string;
   scope?: string;
   keyup?: boolean;
@@ -18,6 +21,17 @@ export function useHotkeys(
   const memoisedCallback = useCallback(callback, deps);
 
   useEffect(() => {
+    hotkeys.filter = ({target, srcElement}) => {
+      if (options.enableOnTags) {
+        // @ts-ignore
+        const targetTagName = (target && target.tagName) || (srcElement && srcElement.tagName);
+
+        return Boolean(targetTagName && options.enableOnTags.includes(targetTagName as AvailableTags));
+      }
+
+      return false;
+    };
+
     if (options.filter) hotkeys.filter = options.filter;
 
     hotkeys(keys, options, memoisedCallback);