styles for navigation and survey info

SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx

@@ -1,15 +1,13 @@
-import React, {useState} from "react";
+import React, {useState, useRef, useEffect} from "react";
 import styles from './SurveyInfo.module.css'
-import DescripButtonSvg from '../../../public/add_circle.svg?react'
 
-interface SurveyInfoProps {}
-
-const SurveyInfo: React.FC<SurveyInfoProps> = () => {
+const SurveyInfo: React.FC = () => {
     const [descriptionSurvey, setDescriptionSurvey] = useState('');
     const [titleSurvey, setTitleSurvey] = useState('Название опроса');
     const [showDescriptionField, setShowDescriptionField] = useState(false);
     const [showNewTitleField, setShowNewTitleField] = useState(false);
-
+    const titleTextareaRef = useRef<HTMLTextAreaElement>(null);
+    const descriptionTextareaRef = useRef<HTMLTextAreaElement>(null);
 
     const handleDescriptionChange = (descripEvent: React.ChangeEvent<HTMLTextAreaElement>) => {
         setDescriptionSurvey(descripEvent.target.value);
@@ -23,10 +21,22 @@ const SurveyInfo: React.FC<SurveyInfoProps> = () => {
         setShowNewTitleField(true);
     }
 
+    useEffect(() => {
+        if (showNewTitleField && titleTextareaRef.current) {
+            titleTextareaRef.current.focus();
+        }
+    }, [showNewTitleField]);
+
     const handleAddDescriptionClick = () => {
         setShowDescriptionField(true);
     }
 
+    useEffect(() => {
+        if (showDescriptionField && descriptionTextareaRef.current){
+            descriptionTextareaRef.current.focus();
+        }
+    }, [showDescriptionField]);
+
     const handleTitleKeyDown = (titleClickEnter: React.KeyboardEvent<HTMLTextAreaElement>) => {
         if (titleClickEnter.key === 'Enter'){
             titleClickEnter.preventDefault();
@@ -45,22 +55,34 @@ const SurveyInfo: React.FC<SurveyInfoProps> = () => {
         setShowDescriptionField(true);
     }
 
+    const handleTitleBlur = () => {
+        setShowNewTitleField(false);
+    };
+
+    const handleDescriptionBlur = () => {
+        setShowDescriptionField(false);
+    };
+
+
     const renderDescription = ()=> {
         if (descriptionSurvey && !showDescriptionField) {
             return (
                 <button className={styles.description} onClick={handleParagraphClick}>
-                    <p>{descriptionSurvey}</p>
+                    {descriptionSurvey}
                 </button>
             );
         } else if (showDescriptionField) {
             return (
                 <p className={styles.description}>
-        <textarea
-            className={styles.textareaDescrip}
-            value={descriptionSurvey}
-            onChange={handleDescriptionChange}
-            onKeyDown={handleDescriptionKeyDown}
-        />
+                    <textarea
+                        ref={descriptionTextareaRef}
+                        className={styles.textareaDescrip}
+                        value={descriptionSurvey}
+                        placeholder={'Добавить описание'}
+                        onChange={handleDescriptionChange}
+                        onKeyDown={handleDescriptionKeyDown}
+                        onBlur={handleDescriptionBlur}
+                    />
                 </p>
             );
         } else {
@@ -70,7 +92,7 @@ const SurveyInfo: React.FC<SurveyInfoProps> = () => {
                     onClick={handleAddDescriptionClick}
                 >
                     <span className={styles.textButton}>Добавить описание</span>
-                    <DescripButtonSvg className={styles.descButtonImg}/>
+                    <img src='../../../public/add_circle.svg' className={styles.descButtonImg} alt='add circle'/>
                 </button>
             );
         }
@@ -83,14 +105,17 @@ const SurveyInfo: React.FC<SurveyInfoProps> = () => {
                     showNewTitleField ? (
                         <h1 className={styles.titleSurvey}>
                             <textarea className={styles.textareaTitle}
-                                value={titleSurvey}
-                                onChange={handleNewTitleChange}
-                                onKeyDown={handleTitleKeyDown}
+                                      ref={titleTextareaRef}
+                                      value={titleSurvey === 'Название опроса' ? '' : titleSurvey}
+                                      placeholder={'Название опроса'}
+                                      onChange={handleNewTitleChange}
+                                      onKeyDown={handleTitleKeyDown}
+                                      onBlur={handleTitleBlur}
                             />
                         </h1>
                     ) : (
                         <button className={styles.titleSurvey} onClick={handleAddNewTitleClick}>
-                            <h1>{titleSurvey}</h1>
+                            <h1>{titleSurvey || 'Название опроса'}</h1>
                         </button>
                     )
                 }