fix: Clicking out of input without selecting dropdown still selects it

apps/builder/app/builder/shared/sync/sync-server.ts

@@ -304,10 +304,19 @@ export class ServerSyncStorage implements SyncStorage {
   }
   subscribe(setState: (state: unknown) => void, signal: AbortSignal) {
     const projectId = $project.get()?.id ?? "";
-    loadBuilderData({ projectId, signal }).then((data) => {
-      const serverData = new Map(Object.entries(data));
-      setState(new Map([["server", serverData]]));
-    });
+    loadBuilderData({ projectId, signal })
+      .then((data) => {
+        const serverData = new Map(Object.entries(data));
+        setState(new Map([["server", serverData]]));
+      })
+      .catch((err) => {
+        if (err instanceof Error) {
+          console.error(err);
+          return;
+        }
+
+        // Abort error do nothing
+      });
   }
 }
 

apps/builder/app/canvas/shared/styles.ts

@@ -20,6 +20,7 @@ import {
   componentAttribute,
 } from "@webstudio-is/react-sdk";
 import {
+  StyleValue,
   type TransformValue,
   type VarValue,
   createRegularStyleSheet,
@@ -45,6 +46,7 @@ import { $selectedInstance, $selectedPage } from "~/shared/awareness";
 import { findAllEditableInstanceSelector } from "~/shared/instance-utils";
 import type { InstanceSelector } from "~/shared/tree-utils";
 import { getVisibleElementsByInstanceSelector } from "~/shared/dom-utils";
+import { createComputedStyleDeclStore } from "~/builder/features/style-panel/shared/model";
 
 const userSheet = createRegularStyleSheet({ name: "user-styles" });
 const stateSheet = createRegularStyleSheet({ name: "state-styles" });
@@ -282,15 +284,18 @@ const getEphemeralProperty = (styleDecl: StyleDecl) => {
 // between all token usages
 const toVarValue = (
   styleDecl: StyleDecl,
-  transformValue: TransformValue
+  transformValue: TransformValue,
+  fallback?: StyleValue
 ): undefined | VarValue => {
   return {
     type: "var",
     // var style value is relying on name without leading "--"
     // escape complex selectors in state like ":hover"
     // setProperty and removeProperty escape automatically
     value: CSS.escape(getEphemeralProperty(styleDecl).slice(2)),
-    fallback: toVarFallback(styleDecl.value, transformValue),
+    fallback: fallback
+      ? toVarFallback(fallback, transformValue)
+      : toVarFallback(styleDecl.value, transformValue),
   };
 };
 
@@ -598,21 +603,11 @@ const subscribeEphemeralStyle = () => {
     // reset ephemeral styles
     if (ephemeralStyles.length === 0) {
       canvasApi.resetInert();
+
       for (const [
         styleDecl,
         elements,
       ] of appliedEphemeralDeclarations.values()) {
-        // prematurely apply last known ephemeral update to user stylesheet
-        // to avoid lag because of delay between deleting ephemeral style
-        // and sending style patch (and rendering)
-        const mixinRule = userSheet.addMixinRule(styleDecl.styleSourceId);
-        mixinRule.setDeclaration({
-          breakpoint: styleDecl.breakpointId,
-          selector: styleDecl.state ?? "",
-          property: styleDecl.property,
-          value:
-            toVarValue(styleDecl, $transformValue.get()) ?? styleDecl.value,
-        });
         document.documentElement.style.removeProperty(
           getEphemeralProperty(styleDecl)
         );
@@ -631,7 +626,7 @@ const subscribeEphemeralStyle = () => {
       canvasApi.setInert();
       const selector = `[${idAttribute}="${instance.id}"]`;
       const rule = userSheet.addNestingRule(selector);
-      let ephemetalSheetUpdated = false;
+      let ephemeralSheetUpdated = false;
       for (const styleDecl of ephemeralStyles) {
         // update custom property
         document.documentElement.style.setProperty(
@@ -649,22 +644,32 @@ const subscribeEphemeralStyle = () => {
           );
         }
 
-        // render temporary rule for instance with var()
-        // rendered with "all" breakpoint and without state
-        // to reflect changes in canvas without user interaction
+        // Lazily add a rule to the user stylesheet (it might not be created yet if no styles have been added to the instance property).
         const styleDeclKey = getStyleDeclKey(styleDecl);
         if (appliedEphemeralDeclarations.has(styleDeclKey) === false) {
-          ephemetalSheetUpdated = true;
+          ephemeralSheetUpdated = true;
+
           const mixinRule = userSheet.addMixinRule(styleDecl.styleSourceId);
+
+          // Use the actual style value as a fallback (non-ephemeral); see the “Lazy” comment above.
+          const computedStyleDecl = createComputedStyleDeclStore(
+            styleDecl.property
+          ).get();
+
+          const value =
+            toVarValue(
+              styleDecl,
+              $transformValue.get(),
+              computedStyleDecl.cascadedValue
+            ) ?? computedStyleDecl.cascadedValue;
+
           mixinRule.setDeclaration({
             breakpoint: styleDecl.breakpointId,
             selector: styleDecl.state ?? "",
             property: styleDecl.property,
-            value:
-              toVarValue(styleDecl, $transformValue.get()) ?? styleDecl.value,
+            value,
           });
-          // add local style source when missing to support
-          // ephemeral styles on newly created instances
+
           rule.addMixin(styleDecl.styleSourceId);
 
           // temporary render var() in state sheet as well
@@ -675,15 +680,14 @@ const subscribeEphemeralStyle = () => {
               // render without state
               selector: "",
               property: styleDecl.property,
-              value:
-                toVarValue(styleDecl, $transformValue.get()) ?? styleDecl.value,
+              value,
             });
           }
         }
         appliedEphemeralDeclarations.set(styleDeclKey, [styleDecl, elements]);
       }
       // avoid stylesheet rerendering on every ephemeral update
-      if (ephemetalSheetUpdated) {
+      if (ephemeralSheetUpdated) {
         userSheet.render();
         stateSheet.render();
       }