fix: survey autoclose on inactivity fix (#4916)

Co-authored-by: Dhruwang <dhruwangjariwala18@gmail.com>

packages/surveys/src/components/general/survey.tsx

@@ -120,6 +120,8 @@ export function Survey({
     return null;
   }, [apiHost, environmentId, getSetIsError, getSetIsResponseSendingFinished, surveyState]);
 
+  const [hasInteracted, setHasInteracted] = useState(false);
+
   const [localSurvey, setlocalSurvey] = useState<TJsEnvironmentStateSurvey>(survey);
   const [currentVariables, setCurrentVariables] = useState<TResponseVariables>({});
 
@@ -588,7 +590,12 @@ export function Survey({
     };
 
     return (
-      <AutoCloseWrapper survey={localSurvey} onClose={onClose} offset={offset}>
+      <AutoCloseWrapper
+        survey={localSurvey}
+        onClose={onClose}
+        questionIdx={questionIdx}
+        hasInteracted={hasInteracted}
+        setHasInteracted={setHasInteracted}>
         <div
           className={cn(
             "fb-no-scrollbar fb-bg-survey-bg fb-flex fb-h-full fb-w-full fb-flex-col fb-justify-between fb-overflow-hidden fb-transition-all fb-duration-1000 fb-ease-in-out",

packages/surveys/src/components/wrappers/auto-close-wrapper.tsx

@@ -1,23 +1,39 @@
 import { AutoCloseProgressBar } from "@/components/general/auto-close-progress-bar";
 import React from "preact/compat";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { type TJsEnvironmentStateSurvey } from "@formbricks/types/js";
 
 interface AutoCloseProps {
   survey: TJsEnvironmentStateSurvey;
+  questionIdx: number;
   onClose?: () => void;
-  offset: number;
   children: React.ReactNode;
+  hasInteracted: boolean;
+  setHasInteracted: (hasInteracted: boolean) => void;
 }
 
-export function AutoCloseWrapper({ survey, onClose, children, offset }: AutoCloseProps) {
+export function AutoCloseWrapper({
+  survey,
+  onClose,
+  children,
+  questionIdx,
+  hasInteracted,
+  setHasInteracted,
+}: AutoCloseProps) {
   const [countDownActive, setCountDownActive] = useState(true);
+
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const isAppSurvey = survey.type === "app";
-  const showAutoCloseProgressBar = countDownActive && isAppSurvey && offset === 0;
+
+  const isFirstQuestion = useMemo(() => {
+    if (survey.welcomeCard.enabled) return questionIdx === -1;
+    return questionIdx === 0;
+  }, [questionIdx, survey.welcomeCard.enabled]);
+
+  const showAutoCloseProgressBar = countDownActive && isAppSurvey && isFirstQuestion && !hasInteracted;
 
   const startCountdown = () => {
-    if (!survey.autoClose) return;
+    if (!survey.autoClose || !isFirstQuestion || hasInteracted) return;
 
     if (timeoutRef.current) {
       stopCountdown();
@@ -31,6 +47,8 @@ export function AutoCloseWrapper({ survey, onClose, children, offset }: AutoClos
 
   const stopCountdown = () => {
     setCountDownActive(false);
+    setHasInteracted(true); // Mark that user has interacted
+
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;