From 8ba3881529bd323a83f7e5484ae364d93dc01105 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Mon, 13 Apr 2020 18:36:33 +1000
Subject: [PATCH] Updated nickname modal to focus input by default

---
 src/modals/ChangeNicknameModal.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/modals/ChangeNicknameModal.js b/src/modals/ChangeNicknameModal.js
index 49b9b5b..8c6916c 100644
--- a/src/modals/ChangeNicknameModal.js
+++ b/src/modals/ChangeNicknameModal.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import { Box, Input, Button, Label, Flex } from "theme-ui";
 
 import Modal from "../components/Modal";
@@ -10,13 +10,27 @@ function ChangeNicknameModal({
   nickname,
   onChange,
 }) {
+  const inputRef = useRef();
+  function focusInput() {
+    inputRef.current && inputRef.current.focus();
+  }
+
   return (
-    <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      onAfterOpen={focusInput}
+    >
       <Box as="form" onSubmit={onChangeSubmit}>
         <Label py={2} htmlFor="nicknameChange">
           Change your nickname
         </Label>
-        <Input id="nicknameChange" value={nickname} onChange={onChange} />
+        <Input
+          id="nicknameChange"
+          value={nickname}
+          onChange={onChange}
+          ref={inputRef}
+        />
         <Flex py={2}>
           <Button sx={{ flexGrow: 1 }} disabled={!nickname}>
             Change