web/roomview: focus composer when typing elsewhere

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>
 }
 

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

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}/>