From 85d6019b988fd8108f152eef763c7190ff70ae78 Mon Sep 17 00:00:00 2001
From: Stefan Knutas <stefan.knutas@gmail.com>
Date: Sun, 5 Mar 2023 10:43:40 +0100
Subject: [PATCH] Blur textarea on escape (#24)

Co-authored-by: Federico Brigante <me@fregante.com>
---
 index.ts  | 21 ++++++++++++++-------
 readme.md |  2 +-
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/index.ts b/index.ts
index 47470a9..46e045d 100644
--- a/index.ts
+++ b/index.ts
@@ -86,24 +86,31 @@ export function unindent(element: HTMLTextAreaElement): void {
 }
 
 export function eventHandler(event: KeyboardEvent): void {
-	if (event.defaultPrevented) {
+	if (
+		event.defaultPrevented ||
+		event.metaKey ||
+		event.altKey ||
+		event.ctrlKey
+	) {
 		return;
 	}
 
 	const textarea = event.target as HTMLTextAreaElement;
 
-	if (
-		event.key === 'Tab' &&
-		!event.metaKey &&
-		!event.altKey &&
-		!event.ctrlKey
-	) {
+	if (event.key === 'Tab') {
 		if (event.shiftKey) {
 			unindent(textarea);
 		} else {
 			indent(textarea);
 		}
 
+		event.preventDefault();
+		event.stopImmediatePropagation();
+	} else if (
+		event.key === 'Escape' &&
+		!event.shiftKey
+	) {
+		textarea.blur();
 		event.preventDefault();
 		event.stopImmediatePropagation();
 	}
diff --git a/readme.md b/readme.md
index 8c4a1b4..f5bdb1f 100644
--- a/readme.md
+++ b/readme.md
@@ -55,7 +55,7 @@ If you prefer the raw `indent`/`unindent` methods, they're also available below.
 
 ### indentation.watch(textarea)
 
-Adds <kbd>tab</kbd> and <kbd>shift+tab</kbd> event listeners to the provided `textarea`(s).
+Adds <kbd>tab</kbd> and <kbd>shift+tab</kbd> event listeners to the provided `textarea`(s). It also listens to <kbd>esc</kbd> to blur/unfocus the field and allow the user to keep tabbing.
 
 #### textarea