From 9898e680239aca8d811ad617a89c72aae1efe1e4 Mon Sep 17 00:00:00 2001
From: m5r <mokht@rmi.al>
Date: Fri, 20 Aug 2021 08:31:47 +0800
Subject: [PATCH] focus recipient input when opening the new message area

---
 .../components/new-message-bottom-sheet.tsx        | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/messages/components/new-message-bottom-sheet.tsx b/app/messages/components/new-message-bottom-sheet.tsx
index 439650a..7d8c711 100644
--- a/app/messages/components/new-message-bottom-sheet.tsx
+++ b/app/messages/components/new-message-bottom-sheet.tsx
@@ -1,4 +1,4 @@
-import { Suspense, useEffect, useRef, useState } from "react";
+import { Suspense, useRef, useState } from "react";
 import { BottomSheet } from "react-spring-bottom-sheet";
 import { useAtom } from "jotai";
 import { useRouter, Routes } from "blitz";
@@ -14,13 +14,16 @@ export default function NewMessageBottomSheet() {
 	const [recipient, setRecipient] = useState("");
 	const recipientRef = useRef<HTMLInputElement>(null);
 
-	useEffect(() => {
-		recipientRef.current?.focus();
-	});
-
 	return (
 		<BottomSheet
 			open={isOpen}
+			initialFocusRef={recipientRef}
+			onSpringEnd={(event) => {
+				if (event.type === "OPEN") {
+					// doesn't work with iOS safari *sigh*
+					recipientRef.current?.focus();
+				}
+			}}
 			onDismiss={() => setIsOpen(false)}
 			snapPoints={({ maxHeight }) => maxHeight / 2}
 			header={
@@ -40,6 +43,7 @@ export default function NewMessageBottomSheet() {
 						ref={recipientRef}
 						onChange={(event) => setRecipient(event.target.value)}
 						className="bg-none border-none outline-none flex-1 text-black"
+						type="tel"
 					/>
 				</div>
 				<Suspense fallback={null}>