From 724d7318cf7f9122a6d5dacec7870da3c3e2f78a Mon Sep 17 00:00:00 2001
From: Simon Ser <contact@emersion.fr>
Date: Tue, 22 Jun 2021 14:44:20 +0200
Subject: [PATCH] Focus buffer scrollview instead of composer

Instead of focusing the composer, focus the buffer scrollview when
switching to a buffer. This allows keyboard navigation to work as
expected, with arrow up/down and page up/down scrolling the buffer
instead of doing nothing.

Focus back the composer when a KeyboardEvent produces text. This
allows users to start typing a message right after switching to a
buffer.

Closes: https://todo.sr.ht/~emersion/gamja/64
---
 components/app.js      |  6 +++---
 components/composer.js | 33 ++++++++++++++++++++++++++++-----
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/components/app.js b/components/app.js
index ef35fde..e8f838c 100644
--- a/components/app.js
+++ b/components/app.js
@@ -290,8 +290,8 @@ export default class App extends Component {
 				lastReadReceipt,
 			});
 
-			if (this.composer.current) {
-				this.composer.current.focus();
+			if (this.buffer.current) {
+				this.buffer.current.focus();
 			}
 
 			if (buf.messages.length == 0) {
@@ -1275,7 +1275,7 @@ export default class App extends Component {
 				scrollKey=${this.state.activeBuffer}
 				onScrollTop=${this.handleBufferScrollTop}
 			>
-				<section id="buffer" ref=${this.buffer}>
+				<section id="buffer" ref=${this.buffer} tabindex="-1">
 					<${Buffer}
 						buffer=${activeBuffer}
 						server=${activeServer}
diff --git a/components/composer.js b/components/composer.js
index 4528d43..9ae634e 100644
--- a/components/composer.js
+++ b/components/composer.js
@@ -58,12 +58,35 @@ export default class Composer extends Component {
 	}
 
 	handleWindowKeyDown(event) {
-		if (document.activeElement === document.body && event.key === "/" && !this.state.text) {
-			event.preventDefault();
-			this.setState({ text: "/" }, () => {
-				this.focus();
-			});
+		// If an <input> or <button> is focused, ignore.
+		if (document.activeElement !== document.body && document.activeElement.tagName !== "SECTION") {
+			return;
 		}
+
+		// Ignore events that don't produce a Unicode string. If the key event
+		// result in a character being typed by the user, KeyboardEvent.key
+		// will contain the typed string. The key string may contain one
+		// Unicode non-control character and multiple Unicode combining
+		// characters. String.prototype.length cannot be used since it would
+		// return the number of Unicode code-points. Instead, the spread
+		// operator is used to count the number of non-combining Unicode
+		// characters.
+		if ([...event.key].length !== 1) {
+			return;
+		}
+
+		if (this.state.text) {
+			return;
+		}
+
+		if (this.props.readOnly && event.key !== "/") {
+			return;
+		}
+
+		event.preventDefault();
+		this.setState({ text: event.key }, () => {
+			this.focus();
+		});
 	}
 
 	componentDidMount() {