fix: auto focus while reply message

src/common/component/Send/index.js

@@ -1,42 +1,46 @@
-import { useState, useEffect, useRef } from "react";
-import { MdAdd, MdClose } from "react-icons/md";
-import TextareaAutosize from "react-textarea-autosize";
-import { useDispatch, useSelector } from "react-redux";
-import { useKey } from "rooks";
+import { useState, useEffect, useRef } from 'react';
+import { MdAdd, MdClose } from 'react-icons/md';
+import TextareaAutosize from 'react-textarea-autosize';
+import { useDispatch, useSelector } from 'react-redux';
+import { useKey } from 'rooks';
 
-import { removeReplyMessage } from "../../../app/slices/message.pending";
-import { useSendChannelMsgMutation } from "../../../app/services/channel";
-import { useSendMsgMutation } from "../../../app/services/contact";
-import { useReplyMessageMutation } from "../../../app/services/message";
-import StyledSend from "./styled";
-import useFiles from "./useFiles";
-import UploadModal from "./UploadModal";
-import EmojiPicker from "./EmojiPicker";
+import { removeReplyMessage } from '../../../app/slices/message.pending';
+import { useSendChannelMsgMutation } from '../../../app/services/channel';
+import { useSendMsgMutation } from '../../../app/services/contact';
+import { useReplyMessageMutation } from '../../../app/services/message';
+import StyledSend from './styled';
+import useFiles from './useFiles';
+import UploadModal from './UploadModal';
+import EmojiPicker from './EmojiPicker';
 
 const Types = {
-  channel: "#",
-  user: "@",
+ channel: '#',
+ user: '@'
 };
 export default function Send({
  name,
-  type = "channel",
+ type = 'channel',
  // 发给谁，或者是channel，或者是user
-  id = "",
-  dragFiles = [],
+ id = '',
+ dragFiles = []
 }) {
  const [replyMessage] = useReplyMessageMutation();
  const { files, setFiles, resetFiles } = useFiles([]);
  const inputRef = useRef();
  const [shift, setShift] = useState(false);
  const [enter, setEnter] = useState(false);
-  const [msg, setMsg] = useState("");
+ const [msg, setMsg] = useState('');
  const dispatch = useDispatch();
  // 谁发的
-  const { from_uid, reply = null, contacts } = useSelector((store) => {
+ const {
+  from_uid,
+  reply = null,
+  contacts
+ } = useSelector((store) => {
   return {
    contacts: store.contacts,
    from_uid: store.authData.user.uid,
-      reply: store.pendingMessage.reply[id],
+   reply: store.pendingMessage.reply[id]
   };
  });
  useEffect(() => {
@@ -46,19 +50,16 @@ export default function Send({
  }, [dragFiles]);
 
  const [sendMsg, { isLoading: userSending }] = useSendMsgMutation();
-  const [
-    sendChannelMsg,
-    { isLoading: channelSending },
-  ] = useSendChannelMsgMutation();
-  const sendMessage = type == "channel" ? sendChannelMsg : sendMsg;
+ const [sendChannelMsg, { isLoading: channelSending }] = useSendChannelMsgMutation();
+ const sendMessage = type == 'channel' ? sendChannelMsg : sendMsg;
  const sendingMessage = userSending || channelSending;
  useKey(
-    "Shift",
+  'Shift',
   (e) => {
-      console.log("shift", e.type);
-      setShift(e.type == "keydown");
+   console.log('shift', e.type);
+   setShift(e.type == 'keydown');
   },
-    { eventTypes: ["keydown", "keyup"], target: inputRef }
+  { eventTypes: ['keydown', 'keyup'], target: inputRef }
  );
  const handleMsgChange = (evt) => {
   if (enter && !shift) {
@@ -68,15 +69,15 @@ export default function Send({
   }
  };
  const handleInputKeydown = (e) => {
-    console.log("keydown event", e);
-    setEnter(e.key === "Enter");
+  console.log('keydown event', e);
+  setEnter(e.key === 'Enter');
  };
  const selectEmoji = (emoji) => {
   setMsg((prev) => `${prev}${emoji}`);
  };
  useEffect(() => {
   inputRef.current.focus();
-  }, [msg]);
+ }, [msg, reply]);
  const handleUpload = (evt) => {
   setFiles([...evt.target.files]);
  };
@@ -88,14 +89,14 @@ export default function Send({
   } else {
    sendMessage({ id, content: msg, from_uid });
   }
-    setMsg("");
+  setMsg('');
  };
  const removeReply = () => {
   dispatch(removeReplyMessage(id));
  };
  return (
   <>
-      <StyledSend className={`send ${reply ? "reply" : ""}`}>
+   <StyledSend className={`send ${reply ? 'reply' : ''}`}>
     {reply && (
      <div className="reply">
       <span className="txt">
@@ -109,22 +110,13 @@ export default function Send({
     )}
     <div className="addon">
      <MdAdd size={20} color="#78787C" />
-          <input
-            multiple={true}
-            onChange={handleUpload}
-            type="file"
-            name="file"
-            id="file"
-          />
+     <input multiple={true} onChange={handleUpload} type="file" name="file" id="file" />
     </div>
     <div className="input">
      <TextareaAutosize
-            // autoFocus
+      autoFocus
       onFocus={(e) =>
-              e.currentTarget.setSelectionRange(
-                e.currentTarget.value.length,
-                e.currentTarget.value.length
-              )
+       e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length)
       }
       ref={inputRef}
       className="content"
@@ -141,12 +133,7 @@ export default function Send({
     </div>
    </StyledSend>
    {files.length !== 0 && (
-        <UploadModal
-          type={type}
-          files={files}
-          sendTo={id}
-          closeModal={resetFiles}
-        />
+    <UploadModal type={type} files={files} sendTo={id} closeModal={resetFiles} />
    )}
   </>
  );