From b23e4b4611c4e6bd8126d00ea8e16b3508a5a3b7 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Wed, 6 Apr 2022 10:33:58 +0200
Subject: [PATCH] feat(react): focus chat input when replying

---
 .../src/routes/chat/chat-input.tsx            | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/status-react/src/routes/chat/chat-input.tsx b/packages/status-react/src/routes/chat/chat-input.tsx
index b579223b..2265555d 100644
--- a/packages/status-react/src/routes/chat/chat-input.tsx
+++ b/packages/status-react/src/routes/chat/chat-input.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 
 import { useChatState } from '~/src/contexts/chat-context'
 import { CrossIcon } from '~/src/icons/cross-icon'
@@ -15,9 +15,22 @@ import { Text } from '~/src/system/text'
 
 import type { Message } from '~/src/contexts/chat-context'
 
-export const ChatInput = () => {
+interface Props {
+  value?: string
+}
+
+export const ChatInput = (props: Props) => {
+  const { value } = props
   const { state } = useChatState()
 
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (state.message) {
+      inputRef.current?.focus()
+    }
+  }, [state.message])
+
   return (
     <Wrapper>
       <IconButton label="Add file">
@@ -27,7 +40,7 @@ export const ChatInput = () => {
         {state.message && <InputReply reply={state.message} />}
 
         <InputWrapper>
-          <Input placeholder="Message" />
+          <Input ref={inputRef} placeholder="Message" defaultValue={value} />
           <Flex>
             <IconButton label="Pick emoji">
               <EmojiIcon />