feat: create new answers logic

src/pages/Questions/answerOptions/AnswerOptions.tsx

@@ -21,6 +21,7 @@ import MessageIcon from "@icons/messagIcon";
 import Popover from "@mui/material/Popover";
 import TextareaAutosize from "@mui/base/TextareaAutosize";
 
+import type { KeyboardEvent } from "react";
 // Импортируем интерфейс Varian
 
 interface Props {
@@ -53,6 +54,15 @@ export default function AnswerOptions({ totalIndex }: Props) {
 
   const id = "my-popover-id";
 
+  const addNewAnswer = () => {
+    const answerNew = Answer.slice(); // Create a shallow copy of the array
+    answerNew.push({ answer: "", answerLong: "", hints: "" });
+
+    updateQuestionsList(totalIndex, {
+      content: { ...listQuestions[totalIndex].content, variants: answerNew },
+    });
+  };
+
   return (
     <>
       <Box sx={{ padding: "0 20px 20px 20px" }}>
@@ -80,6 +90,7 @@ export default function AnswerOptions({ totalIndex }: Props) {
                 <TextField
                   value={variant.answer}
                   fullWidth
+                  autoFocus
                   placeholder={"Добавьте ответ"}
                   onChange={(e) => {
                     const answerNew = Answer.slice(); // Create a shallow copy of the array
@@ -88,6 +99,9 @@ export default function AnswerOptions({ totalIndex }: Props) {
                     clonContent.variants = answerNew;
                     updateQuestionsList(totalIndex, { content: clonContent });
                   }}
+                  onKeyDown={(event: KeyboardEvent<HTMLInputElement>) =>
+                    event.code === "Enter" && addNewAnswer()
+                  }
                   InputProps={{
                     startAdornment: (
                       <InputAdornment position="start">
@@ -149,7 +163,6 @@ export default function AnswerOptions({ totalIndex }: Props) {
                   }}
                   inputProps={{
                     sx: {
-                      borderRadius: "10px",
                       fontSize: "18px",
                       lineHeight: "21px",
                       py: 0,
@@ -173,17 +186,7 @@ export default function AnswerOptions({ totalIndex }: Props) {
             component="button"
             variant="body2"
             sx={{ color: theme.palette.brightPurple.main }}
-            onClick={() => {
+            onClick={addNewAnswer}
-              const answerNew = Answer.slice(); // Create a shallow copy of the array
-              answerNew.push({
-                answer: "",
-                answerLong: "",
-                hints: "",
-              });
-              let clonContent = listQuestions[totalIndex].content;
-              clonContent.variants = answerNew;
-              updateQuestionsList(totalIndex, { content: clonContent });
-            }}
           >
             Добавьте ответ
           </Link>