Browse Source

refactor: remove read-only state management from question inputs and update snap list ignore selectors to improve touch interaction reliability

master
mortezaei 6 days ago
parent
commit
36cfcc8a76
  1. 10
      src/components/Componentes/question-snap-list.tsx
  2. 22
      src/components/Componentes/question-text.tsx

10
src/components/Componentes/question-snap-list.tsx

@ -26,6 +26,13 @@ const DRAG_IGNORE_SELECTOR = [
"input",
"textarea",
"select",
"button",
"label",
"a",
'[role="button"]',
'[role="option"]',
'[role="checkbox"]',
'[role="radio"]',
'[contenteditable="true"]',
"[data-snap-drag-ignore]",
].join(", ");
@ -389,7 +396,6 @@ export function QuestionSnapList({
const drag = dragRef.current;
if (!drag.pointerDown) {
event.preventDefault();
return;
}
@ -401,7 +407,7 @@ export function QuestionSnapList({
if (!drag.engaged) {
if (Math.abs(drag.startY - y) < DRAG_ENGAGE_DISTANCE) {
event.preventDefault();
// Allow micro-movements during a tap to produce native click/focus events
return;
}
drag.engaged = true;

22
src/components/Componentes/question-text.tsx

@ -33,7 +33,6 @@ export default function QuestionText({
const [localValue, setLocalValue] = useState(
isMuted ? "" : String(value ?? ""),
);
const [isReadOnly, setIsReadOnly] = useState(true);
const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
useEffect(() => {
@ -60,17 +59,12 @@ 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";
@ -107,11 +101,9 @@ export default function QuestionText({
>
<input
type="text"
name="off_email"
readOnly={isReadOnly || disabled || isMuted}
onFocus={handleFocus}
onTouchStart={handleFocus}
autoComplete="one-time-code"
inputMode="text"
name="text_field"
autoComplete="off"
autoCorrect="off"
autoCapitalize="none"
spellCheck="false"
@ -154,12 +146,10 @@ export default function QuestionText({
<QuestionTitle question={question} />
<input
type={isNumericQuestion ? "tel" : "text"}
inputMode={isNumericQuestion ? "numeric" : undefined}
inputMode={isNumericQuestion ? "numeric" : "text"}
pattern={isNumericQuestion ? "[0-9]*" : undefined}
readOnly={isReadOnly || disabled || isMuted}
onFocus={handleFocus}
onTouchStart={handleFocus}
autoComplete="one-time-code"
name="text_field"
autoComplete="off"
autoCorrect="off"
autoCapitalize="none"
spellCheck="false"

Loading…
Cancel
Save