Added a reference to the text field to focus when replying

bounswe · Dec 8, 2021 · efb7cf5 · efb7cf5
1 parent b835e29
commit efb7cf5
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/frontend/src/Views/Comments/Comment.js b/frontend/src/Views/Comments/Comment.js
@@ -4,7 +4,7 @@ import Avatar from '@mui/material/Avatar';
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
-export default function Comment(props){
+const Comment = React.forwardRef((props,ref) => {
     const [open, setOpen] = React.useState(true);
     const object = props.content
     const handleClick = () => {
@@ -14,6 +14,9 @@ export default function Comment(props){
         if (!props.newcomment.includes("@")) {
             props.setReply("@" + object.username + " " + props.newcomment)
         }
+        setTimeout(() => {
+            ref.current.focus();
+        }, 100);
     }
     const formatDate = (dateString) => {
         const months = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"]
@@ -61,10 +64,12 @@ export default function Comment(props){
             </ListItem>
             {object.answers !== null && object.answers !== undefined && object.answers !== []
                 ? object.answers.map(d =>
-                    <Comment content={d} newcomment={props.newcomment} setReply={props.setReply}/>
+                    <Comment content={d} newcomment={props.newcomment} setReply={props.setReply} ref={ref}/>
                 )
                 : null
             }
         </React.Fragment>
     );
-}
+})
+export default Comment;
+
diff --git a/frontend/src/Views/Comments/Comments.js b/frontend/src/Views/Comments/Comments.js
@@ -4,6 +4,7 @@ import Button from "@mui/material/Button";
 import TextField from '@mui/material/TextField';
 import Comment from "./Comment";
 import List from '@mui/material/List';
+
 import Grid from "@mui/material/Grid";
 import DialogContent from "@mui/material/DialogContent";
 import {useRef} from "react";
@@ -12,6 +13,7 @@ export default function Comments(props){
     const typoStyle = {fontSize:13,display:"flex", flexDirection: "column", justifyContent: "center"}
     const [open, setOpen] = React.useState(false);
     const [newComment, setNewComment] = React.useState("");
+    let textInput = useRef(null);
 
     const handleOpen = () => setOpen(true);
     const handleClose = () => setOpen(false);
@@ -49,7 +51,7 @@ export default function Comments(props){
                     <Grid container spacing={3}>
                         <Grid item sm={10}>
                             <TextField id="comment" fullWidth size="small" variant="outlined" placeholder="Add comment..."
-                                    autoFocus style={{marginLeft:"3%",marginBottom:"3%"}}    value={newComment||""} onChange={handleInput}></TextField>
+                                  inputRef={textInput}   autoFocus style={{marginLeft:"3%",marginBottom:"3%"}}    value={newComment||""} onChange={handleInput}></TextField>
                         </Grid>
                         <Grid item sm={2}>
                             <Button onClick={handlePostComment}>Share</Button>