From ec447429c5caa417c2c11fa359fecc65ebfa1525 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Fri, 4 Feb 2022 12:38:40 -0800
Subject: [PATCH] Autofocus join call button when ready

---
 src/room/LobbyView.jsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/room/LobbyView.jsx b/src/room/LobbyView.jsx
index bc97ece97..e63022fe9 100644
--- a/src/room/LobbyView.jsx
+++ b/src/room/LobbyView.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import styles from "./LobbyView.module.css";
 import { Button, CopyButton, MicButton, VideoButton } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
@@ -43,6 +43,14 @@ export function LobbyView({
 
   useLocationNavigation(state === GroupCallState.InitializingLocalCallFeed);
 
+  const joinCallButtonRef = useRef();
+
+  useEffect(() => {
+    if (state === GroupCallState.LocalCallFeedInitialized) {
+      joinCallButtonRef.current.focus();
+    }
+  }, [state]);
+
   return (
     <div className={styles.room}>
       <Header>
@@ -103,6 +111,7 @@ export function LobbyView({
             )}
           </div>
           <Button
+            ref={joinCallButtonRef}
             className={styles.copyButton}
             size="lg"
             disabled={state !== GroupCallState.LocalCallFeedInitialized}