fix(webapp): stop the sidebar feedback popover from canceling the submit

Author: isshaddad

.server-changes/fix-sidebar-feedback.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Fix the sidebar "Help & Feedback → Contact us" form sometimes not sending your message. It now sends reliably every time.

apps/webapp/app/components/Feedback.tsx

@@ -27,13 +27,26 @@ import { TextLink } from "./primitives/TextLink";
 import { DialogClose } from "@radix-ui/react-dialog";
 
 type FeedbackProps = {
-  button: ReactNode;
+  button?: ReactNode;
   defaultValue?: FeedbackType;
   onOpenChange?: (open: boolean) => void;
+  // Controlled mode — pass both to host the dialog outside a popover so the popover closing can't
+  // unmount the form mid-submit (that teardown was intermittently canceling the feedback POST).
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
 };
 
-export function Feedback({ button, defaultValue = "bug", onOpenChange }: FeedbackProps) {
-  const [open, setOpen] = useState(false);
+export function Feedback({
+  button,
+  defaultValue = "bug",
+  onOpenChange,
+  open: openProp,
+  setOpen: setOpenProp,
+}: FeedbackProps) {
+  const [openState, setOpenState] = useState(false);
+  // Controlled when the caller passes open/setOpen (hosted outside a popover); otherwise self-managed.
+  const open = openProp ?? openState;
+  const setOpen = setOpenProp ?? setOpenState;
   const [searchParams, setSearchParams] = useSearchParams();
   const location = useLocation();
   const lastSubmission = useActionData();
@@ -79,7 +92,7 @@ export function Feedback({ button, defaultValue = "bug", onOpenChange }: Feedbac
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogTrigger asChild>{button}</DialogTrigger>
+      {button ? <DialogTrigger asChild>{button}</DialogTrigger> : null}
       <DialogContent>
         <DialogHeader>Contact us</DialogHeader>
         <div className="mt-2 flex flex-col gap-4">

apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx

@@ -35,6 +35,10 @@ export function HelpAndFeedback({
   projectId?: string;
 }) {
   const [isHelpMenuOpen, setHelpMenuOpen] = useState(false);
+  // Hosted outside the popover (below) and opened from the menu item, so the popover closing never
+  // unmounts the feedback form mid-submit — that teardown was intermittently canceling the POST to
+  // /resources/feedback, so messages sent from the sidebar were silently lost.
+  const [isFeedbackOpen, setFeedbackOpen] = useState(false);
   const _currentPlan = useCurrentPlan();
   const { changelogs } = useRecentChangelogs(organizationId, projectId);
 
@@ -164,14 +168,14 @@ export function HelpAndFeedback({
                     target="_blank"
                   />
                   <Shortcuts />
-                  <Feedback
-                    button={
-                      <SideMenuItemButton
-                        icon={EnvelopeIcon}
-                        name="Contact us…"
-                        data-action="contact-us"
-                      />
-                    }
+                  <SideMenuItemButton
+                    icon={EnvelopeIcon}
+                    name="Contact us…"
+                    data-action="contact-us"
+                    onClick={() => {
+                      setHelpMenuOpen(false);
+                      setFeedbackOpen(true);
+                    }}
                   />
                 </div>
                 <div className="flex flex-col gap-1 p-1">
@@ -206,6 +210,8 @@ export function HelpAndFeedback({
           </Popover>
         )}
       </AskAIRoot>
+      {/* Hosted outside the popover so closing the menu can't unmount the form mid-submit. */}
+      <Feedback open={isFeedbackOpen} setOpen={setFeedbackOpen} />
     </motion.div>
   );
 }