fix(useFeedbackForm): Cleanup after form is closed or submitted (#74163)

Without these changes, the form after being closed still prevented the
page from scrolling. I'm not sure if this is intended or is a bug with
the SDK, but I was able to fix this by removing from the DOM when the
form was closed or submitted.

Author: malwilley

static/app/utils/useFeedbackForm.spec.tsx

@@ -7,6 +7,7 @@ import {GlobalFeedbackForm, useFeedbackForm} from 'sentry/utils/useFeedbackForm'
 const mockForm = {
   appendToDom: jest.fn(),
   open: jest.fn(),
+  close: jest.fn(),
   removeFromDom: jest.fn(),
 };
 
@@ -28,6 +29,7 @@ describe('useFeedbackForm', function () {
     jest
       .spyOn(useFeedback, 'useFeedback')
       .mockReturnValue({feedback: mockFeedback, options: defaultOptions});
+    jest.clearAllMocks();
   });
 
   it('can open the form using useFeedbackForm', async function () {

static/app/utils/useFeedbackForm.tsx

@@ -48,33 +48,44 @@ function useOpenForm() {
   const formRef = useRef<FeedbackDialog | null>(null);
   const {feedback, options} = useFeedback({});
 
+  const cleanup = useCallback(() => {
+    try {
+      if (formRef.current) {
+        formRef.current.close();
+        formRef.current.removeFromDom();
+        formRef.current = null;
+      }
+    } catch {
+      // If the form is already removed from the DOM, then we can ignore this error
+    }
+  }, []);
+
   const openForm = useCallback(
     async (optionOverrides?: UseFeedbackOptions) => {
       if (!feedback) {
         return;
       }
 
       if (formRef.current) {
-        formRef.current.removeFromDom();
+        cleanup();
       }
 
-      formRef.current = await feedback.createForm({...options, ...optionOverrides});
+      formRef.current = await feedback.createForm({
+        ...options,
+        ...optionOverrides,
+        onFormClose: cleanup,
+        onFormSubmitted: cleanup,
+      });
+
       formRef.current.appendToDom();
       formRef.current.open();
     },
-    [feedback, options]
+    [cleanup, feedback, options]
   );
 
-  // Cleanup the leftover form element when the component unmounts
   useEffect(() => {
-    return () => {
-      if (!formRef.current) {
-        return;
-      }
-
-      formRef.current.removeFromDom();
-    };
-  }, []);
+    return cleanup;
+  }, [cleanup]);
 
   return feedback ? openForm : null;
 }