fix: Edit Recall button flicker when user types into the edit field (#6121)

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

apps/web/modules/survey/components/question-form-input/components/recall-wrapper.tsx

@@ -16,7 +16,7 @@ import { RecallItemSelect } from "@/modules/survey/components/question-form-inpu
 import { Button } from "@/modules/ui/components/button";
 import { useTranslate } from "@tolgee/react";
 import { PencilIcon } from "lucide-react";
-import React, { JSX, ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import React, { JSX, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
 import { TSurvey, TSurveyRecallItem } from "@formbricks/types/surveys/types";
 
@@ -63,6 +63,10 @@ export const RecallWrapper = ({
   const [renderedText, setRenderedText] = useState<JSX.Element[]>([]);
   const fallbackInputRef = useRef<HTMLInputElement>(null);
 
+  const hasRecallItems = useMemo(() => {
+    return recallItems.length > 0 || value?.includes("recall:");
+  }, [recallItems.length, value]);
+
   useEffect(() => {
     setInternalValue(headlineToRecall(value, recallItems, fallbacks));
   }, [value, recallItems, fallbacks]);
@@ -251,7 +255,7 @@ export const RecallWrapper = ({
         isRecallSelectVisible: showRecallItemSelect,
         children: (
           <div>
-            {internalValue?.includes("recall:") && (
+            {hasRecallItems && (
               <Button
                 variant="ghost"
                 type="button"