feat: add focus-based read-only toggle to QuestionText and update mock type casting in QuestionPhone test

src/components/Componentes/question-phone.test.tsx

@@ -27,14 +27,14 @@ vi.mock("./question-answer-storage", () => ({
 }));
 
 describe("QuestionPhone Component", () => {
-  const mockQuestion: QuestionField = {
+  const mockQuestion = {
     id: "personal_contact_number",
     title: "شماره تماس شخصی",
     type: "phone",
     extras: {
       placeHolder: "+98 9123456789",
     },
-  };
+  } as QuestionField;
 
   it("renders phone input and opens sheet on country code click", async () => {
     render(<QuestionPhone question={mockQuestion} countryCode="+98" />);

src/components/Componentes/question-text.tsx

@@ -33,6 +33,7 @@ export default function QuestionText({
   const [localValue, setLocalValue] = useState(
     isMuted ? "" : String(value ?? ""),
   );
+  const [isReadOnly, setIsReadOnly] = useState(true);
   const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
@@ -59,12 +60,17 @@ export default function QuestionText({
   };
 
   const handleBlur = () => {
+    setIsReadOnly(true);
     if (debounceTimerRef.current) {
       clearTimeout(debounceTimerRef.current);
     }
     setAnswerValue(question, localValue);
   };
 
+  const handleFocus = () => {
+    setIsReadOnly(false);
+  };
+
   const stringValue = localValue.trim();
   const isEmailQuestion = question.type === "email" || question.validation?.format === "email";
 
@@ -101,8 +107,11 @@ export default function QuestionText({
         >
           <input
             type="text"
-            inputMode="email"
-            autoComplete="off"
+            name="off_email"
+            readOnly={isReadOnly || disabled || isMuted}
+            onFocus={handleFocus}
+            onTouchStart={handleFocus}
+            autoComplete="one-time-code"
             autoCorrect="off"
             autoCapitalize="none"
             spellCheck="false"
@@ -147,7 +156,10 @@ export default function QuestionText({
         type={isNumericQuestion ? "tel" : "text"}
         inputMode={isNumericQuestion ? "numeric" : undefined}
         pattern={isNumericQuestion ? "[0-9]*" : undefined}
-        autoComplete="off"
+        readOnly={isReadOnly || disabled || isMuted}
+        onFocus={handleFocus}
+        onTouchStart={handleFocus}
+        autoComplete="one-time-code"
         autoCorrect="off"
         autoCapitalize="none"
         spellCheck="false"