Fix: Disable autoFocus when embedded with iframe (#615)

apps/web/app/(app)/environments/[environmentId]/surveys/PreviewSurvey.tsx

@@ -280,6 +280,7 @@ export default function PreviewSurvey({
                     brandColor={brandColor}
                     lastQuestion={idx === questions.length - 1}
                     onSubmit={gotoNextQuestion}
+                    autoFocus={false}
                   />
                 ) : null
               )
@@ -307,6 +308,7 @@ export default function PreviewSurvey({
                       brandColor={brandColor}
                       lastQuestion={idx === questions.length - 1}
                       onSubmit={gotoNextQuestion}
+                      autoFocus={false}
                     />
                   ) : null
                 )

apps/web/app/s/[surveyId]/LinkSurvey.tsx

@@ -11,7 +11,7 @@ import { cn } from "@formbricks/lib/cn";
 import { Confetti } from "@formbricks/ui";
 import { ArrowPathIcon } from "@heroicons/react/24/solid";
 import type { Survey } from "@formbricks/types/surveys";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
 type EnhancedSurvey = Survey & {
   brandColor: string;
@@ -38,6 +38,14 @@ export default function LinkSurvey({ survey }: LinkSurveyProps) {
 
   // Create a reference to the top element
   const topRef = useRef<HTMLDivElement>(null);
+  const [autoFocus, setAutofocus] = useState(false);
+
+  // Not in an iframe, enable autofocus on input fields.
+  useEffect(() => {
+    if (window.self === window.top) {
+      setAutofocus(true);
+    }
+  }, []);
 
   // Scroll to top when the currentQuestion changes
   useEffect(() => {
@@ -90,6 +98,7 @@ export default function LinkSurvey({ survey }: LinkSurveyProps) {
               brandColor={survey.brandColor}
               lastQuestion={lastQuestion}
               onSubmit={submitResponse}
+              autoFocus={autoFocus}
             />
           )}
         </ContentWrapper>

apps/web/components/preview/OpenTextQuestion.tsx

@@ -9,6 +9,7 @@ interface OpenTextQuestionProps {
   onSubmit: (data: { [x: string]: any }) => void;
   lastQuestion: boolean;
   brandColor: string;
+  autoFocus?: boolean;
 }
 
 export default function OpenTextQuestion({
@@ -16,6 +17,7 @@ export default function OpenTextQuestion({
   onSubmit,
   lastQuestion,
   brandColor,
+  autoFocus = false,
 }: OpenTextQuestionProps) {
   const [value, setValue] = useState<string>("");
 
@@ -35,7 +37,7 @@ export default function OpenTextQuestion({
       <div className="mt-4">
         {question.longAnswer === false ? (
           <input
-            autoFocus
+            autoFocus={autoFocus}
             name={question.id}
             id={question.id}
             value={value}
@@ -46,7 +48,7 @@ export default function OpenTextQuestion({
           />
         ) : (
           <textarea
-            autoFocus
+            autoFocus={autoFocus}
             rows={3}
             name={question.id}
             id={question.id}

apps/web/components/preview/QuestionConditional.tsx

@@ -12,6 +12,7 @@ interface QuestionConditionalProps {
   onSubmit: (data: { [x: string]: any }) => void;
   lastQuestion: boolean;
   brandColor: string;
+  autoFocus: boolean;
 }
 
 export default function QuestionConditional({
@@ -19,6 +20,7 @@ export default function QuestionConditional({
   onSubmit,
   lastQuestion,
   brandColor,
+  autoFocus,
 }: QuestionConditionalProps) {
   return question.type === QuestionType.OpenText ? (
     <OpenTextQuestion
@@ -26,6 +28,7 @@ export default function QuestionConditional({
       onSubmit={onSubmit}
       lastQuestion={lastQuestion}
       brandColor={brandColor}
+      autoFocus={autoFocus}
     />
   ) : question.type === QuestionType.MultipleChoiceSingle ? (
     <MultipleChoiceSingleQuestion