From e9ca01534ed2f31ef0f1aca23772fac5ebc5edc2 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Thu, 6 Mar 2025 09:53:07 +0000
Subject: [PATCH] fix: Fixes saving binding when closing popover by click
 outside (#4941)

## Description

<img width="518" alt="image"
src="https://github.com/user-attachments/assets/9326dd07-2244-4f57-ae93-a9ab3bf0f38d"
/>


When you are creating a binding from inside a variable dialog and having
popover opened from a popover, when you click outside, binding won't be
saved

## Steps for reproduction

1. create resource variable
2. close
3. edit that variabel
4. bind url
5. click outside of both popovers
6. see changes were saved

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
---
 packages/design-system/src/components/dialog.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/dialog.tsx b/packages/design-system/src/components/dialog.tsx
index 9f8ffff50d..cc7ddb47d5 100644
--- a/packages/design-system/src/components/dialog.tsx
+++ b/packages/design-system/src/components/dialog.tsx
@@ -67,6 +67,7 @@ const DialogContext = createContext<{
 export const Dialog = ({
   resize,
   draggable,
+  onOpenChange,
   ...props
 }: ComponentProps<typeof Primitive.Dialog> & {
   resize?: "both" | "none";
@@ -77,7 +78,20 @@ export const Dialog = ({
     <DialogContext.Provider
       value={{ isMaximized, setIsMaximized, resize, draggable }}
     >
-      <Primitive.Dialog {...props} />
+      <Primitive.Dialog
+        {...props}
+        onOpenChange={(open) => {
+          // When dialog closes, there can be state changes in the content that haven't rendered yet.
+          // In that case we might close the dialog without saving the form changes.
+          // Currently known example is binding popover that opens from variable popover. Second popover gets
+          // closed by unmounting if we click outside and first popover doesn't get the changes because it is trying to render
+          // the value in a form and serialize the form using FormData.
+          // With this we are giving React's render cycle time to render the state before we close the dialog.
+          requestAnimationFrame(() => {
+            onOpenChange?.(open);
+          });
+        }}
+      />
     </DialogContext.Provider>
   );
 };