From f238bb0285214a896921068acbeddaf8afc77ecc Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sun, 13 Oct 2024 21:16:23 +0300
Subject: [PATCH] web/roomview: focus composer when typing elsewhere

---
 web/src/ui/MessageComposer.tsx | 5 +++--
 web/src/ui/RoomView.css        | 1 +
 web/src/ui/RoomView.tsx        | 8 +++++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/src/ui/MessageComposer.tsx b/web/src/ui/MessageComposer.tsx
index c0fe161..3b23579 100644
--- a/web/src/ui/MessageComposer.tsx
+++ b/web/src/ui/MessageComposer.tsx
@@ -31,7 +31,7 @@ const MessageComposer = ({ room }: MessageComposerProps) => {
 		client.sendMessage(room.roomID, text)
 			.catch(err => window.alert("Failed to send message: " + err))
 	}, [text, room, client])
-	return <div className="message-composer" onSubmit={sendMessage}>
+	return <div className="message-composer">
 		<textarea
 			autoFocus
 			rows={text.split("\n").length}
@@ -43,8 +43,9 @@ const MessageComposer = ({ room }: MessageComposerProps) => {
 			}}
 			onChange={evt => setText(evt.target.value)}
 			placeholder="Send a message"
+			id="message-composer"
 		/>
-		<button type="submit">Send</button>
+		<button onClick={sendMessage}>Send</button>
 	</div>
 }
 
diff --git a/web/src/ui/RoomView.css b/web/src/ui/RoomView.css
index f6262ea..250a80f 100644
--- a/web/src/ui/RoomView.css
+++ b/web/src/ui/RoomView.css
@@ -2,6 +2,7 @@ div.room-view {
 	overflow: hidden;
 	height: 100%;
 	display: grid;
+	outline: none;
 	grid-template:
 		"header" 3rem
 		"messageview" 1fr
diff --git a/web/src/ui/RoomView.tsx b/web/src/ui/RoomView.tsx
index 34495e1..bac2631 100644
--- a/web/src/ui/RoomView.tsx
+++ b/web/src/ui/RoomView.tsx
@@ -39,8 +39,14 @@ const RoomHeader = ({ room }: RoomViewProps) => {
 	</div>
 }
 
+const onKeyDownRoomView = (evt: React.KeyboardEvent) => {
+	if (evt.target === evt.currentTarget) {
+		document.getElementById("message-composer")?.focus()
+	}
+}
+
 const RoomView = ({ room }: RoomViewProps) => {
-	return <div className="room-view">
+	return <div className="room-view" onKeyDown={onKeyDownRoomView} tabIndex={-1}>
 		<RoomHeader room={room}/>
 		<TimelineView room={room}/>
 		<MessageComposer room={room}/>