fix feedback-button interfering with forms

apps/formbricks-com/components/shared/FeedbackButton.tsx

@@ -17,7 +17,12 @@ export function FeedbackButton() {
     // Close the feedback form if the user clicks outside of it
     function handleClickOutside(event: any) {
       if (feedbackRef.current && !feedbackRef.current.contains(event.target)) {
-        if (isOpen) setIsOpen(false);
+        if (isOpen) {
+          setIsOpen(false);
+          if (window) {
+            window.formbricks.clean();
+          }
+        }
       }
     }
     // Bind the event listener
@@ -68,6 +73,10 @@ export function FeedbackButton() {
                   window.formbricks.render();
                   window.formbricks.resetForm();
                 }
+              } else {
+                if (window) {
+                  window.formbricks.clean();
+                }
               }
               setIsOpen(!isOpen);
             }}>

apps/web/src/components/FeedbackButton.tsx

@@ -28,7 +28,12 @@ export function FeedbackButton() {
     // Close the feedback form if the user clicks outside of it
     function handleClickOutside(event: any) {
       if (feedbackRef.current && !feedbackRef.current.contains(event.target)) {
-        if (isOpen) setIsOpen(false);
+        if (isOpen) {
+          setIsOpen(false);
+          if (window) {
+            window.formbricks.clean();
+          }
+        }
       }
     }
   }, [feedbackRef, isOpen]);
@@ -74,13 +79,17 @@ export function FeedbackButton() {
                   window.formbricks.render();
                   window.formbricks.resetForm();
                 }
+              } else {
+                if (window) {
+                  window.formbricks.clean();
+                }
               }
               setIsOpen(!isOpen);
             }}>
             {isOpen ? "Close" : "Feedback"}
           </button>
           <div
-            className="xs:rounded-bl-lg xs:rounded-tr-none h-full h-full w-full overflow-hidden rounded-bl-none rounded-tr-lg rounded-tl-lg  bg-slate-50 shadow-lg"
+            className="xs:rounded-bl-lg xs:rounded-tr-none h-full w-full overflow-hidden rounded-bl-none rounded-tr-lg rounded-tl-lg  bg-slate-50 shadow-lg"
             id="formbricks-feedback-wrapper"></div>
         </div>
       </div>

packages/feedback/src/index.ts

@@ -37,9 +37,6 @@ function init() {
   document.querySelectorAll("[data-formbricks-button]").forEach((el) => {
     el.addEventListener("click", open);
   });
-  if (config.divId) {
-    render();
-  }
 }
 window.addEventListener("load", init);
 
@@ -179,6 +176,10 @@ function close() {
   }
   trap.deactivate();
 
+  clean();
+}
+
+function clean() {
   containerElement.innerHTML = "";
 
   containerElement.remove();
@@ -293,7 +294,7 @@ function submit(e: Event) {
   return false;
 }
 
-const formbricks = { init, open, changeType, close, render, submit, resetForm, config };
+const formbricks = { init, open, changeType, close, clean, render, submit, resetForm, config };
 (window as any).formbricks = formbricks;
 
 export default formbricks;