ui upddate ...

src/components/pages/Plan/Form/Form.tsx

@@ -5,9 +5,10 @@ import { planSlice } from "store/reducers/planSlice";
 import useFormWithValidation from "hooks/useFormWithValidation";
 import { useAppDispatch, useAppSelector } from "hooks/redux";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export const Form: React.FC<any> = ({ time }) => {
+  const inputRef = useRef()
   const [error, showError] = useState(false)
   const { values, handleChangeState, resetForm, errors, isValid } =
     useFormWithValidation();
@@ -40,13 +41,14 @@ export const Form: React.FC<any> = ({ time }) => {
     );
   };
 
+ 
   return (
     <div className="calendar-container">
       <h3 className="plan-title">
         Расскажите о себе.
       </h3>
       <button
-        onClick={() => handleReturn()}
+        onClick={(e) => handleReturn()}
         style={{ width: "141px", padding: "4px 16px 4px 4px", height: "32px" }}
         className="button button-type-small button-plan"
       >
@@ -60,8 +62,8 @@ export const Form: React.FC<any> = ({ time }) => {
         <form noValidate onSubmit={handleSubmit} className="form">
           <div className="form-input-container">
             <label className="form-input-caption">Имя</label>
-            <div className={errors.name ? "form-border-error" : 'form-border'}>
-              <input required onChange={handleChangeState} name='name' value={values.name} minLength={2} maxLength={30} className="form-input" type="text"></input>
+            <div onClick={(e: any) => console.log(e.target.closest('input')) } className={errors.name ? "form-border-error" : 'form-border'}>
+              <input ref={inputRef} required onChange={handleChangeState} name='name' value={values.name} minLength={2} maxLength={30} className="form-input" type="text"></input>
             </div>
             <span className={errors.name ? "error-caption error-caption-active" : "error-caption"}>{errors.name}</span>
           </div>