From 03d0c4a0febcb6d796e91ae293243da0667509de Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Wed, 15 Apr 2020 22:08:24 +1000
Subject: [PATCH] Add autofocus to start modal

---
 src/modals/StartModal.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/modals/StartModal.js b/src/modals/StartModal.js
index 91d274c..45c8057 100644
--- a/src/modals/StartModal.js
+++ b/src/modals/StartModal.js
@@ -1,4 +1,4 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useRef } from "react";
 import { Box, Label, Input, Button, Flex, Checkbox } from "theme-ui";
 import { useHistory } from "react-router-dom";
 import shortid from "shortid";
@@ -28,8 +28,17 @@ function StartModal({ isOpen, onRequestClose }) {
     history.push(`/game/${shortid.generate()}`);
   }
 
+  const inputRef = useRef();
+  function focusInput() {
+    inputRef.current && inputRef.current.focus();
+  }
+
   return (
-    <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      onAfterOpen={focusInput}
+    >
       <Flex
         sx={{
           flexDirection: "column",
@@ -49,6 +58,7 @@ function StartModal({ isOpen, onRequestClose }) {
             onChange={handlePasswordChange}
             disabled={!usePassword}
             autoComplete="off"
+            ref={inputRef}
           />
           <Box>
             <Label mb={3}>