From 2f59404ff8220e1f4cfdac9624f4ff780be7cc1f Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Tue, 25 Mar 2025 18:09:12 +0000
Subject: [PATCH] fix: Fix add style input focus when pressing + button (#5047)

## Steps for reproduction

1. go to advanced
2. click + button - focus should happen
3. click again - it will quickly disappear and appear focused again -
this is expected
4. hit enter or tab on recently added value - input will appear focused

## 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
---
 .../builder/shared/css-editor/css-editor.tsx  | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/apps/builder/app/builder/shared/css-editor/css-editor.tsx b/apps/builder/app/builder/shared/css-editor/css-editor.tsx
index e6de16b37d..26745ea3fe 100644
--- a/apps/builder/app/builder/shared/css-editor/css-editor.tsx
+++ b/apps/builder/app/builder/shared/css-editor/css-editor.tsx
@@ -1,5 +1,4 @@
 import { mergeRefs } from "@react-aria/utils";
-import { flushSync } from "react-dom";
 import { colord } from "colord";
 import {
   memo,
@@ -339,6 +338,12 @@ export const CssEditor = ({
     useState<Array<CssProperty>>();
   const containerRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    if (showAddStyleInput) {
+      addPropertyInputRef.current?.focus();
+    }
+  }, [showAddStyleInput]);
+
   const declarationsMap = new Map(
     declarations.map((decl) => [decl.property, decl])
   );
@@ -363,14 +368,6 @@ export const CssEditor = ({
     return styleMap;
   };
 
-  const handleShowAddStyleInput = () => {
-    flushSync(() => {
-      onToggleAddStyleInput?.(true);
-    });
-    // User can click twice on the add button, so we need to focus the input on the second click after autoFocus isn't working.
-    addPropertyInputRef.current?.focus();
-  };
-
   const handleAbortSearch = () => {
     if (containerRef.current) {
       containerRef.current.style.minHeight = "auto";
@@ -463,7 +460,7 @@ export const CssEditor = ({
               valueInputRef={lastRecentValueInputRef}
               onChangeComplete={(event) => {
                 if (event.type === "enter") {
-                  handleShowAddStyleInput();
+                  onToggleAddStyleInput?.(true);
                 }
               }}
               onReset={afterChangingStyles}
@@ -489,9 +486,7 @@ export const CssEditor = ({
           }}
           onClose={afterChangingStyles}
           onFocus={() => {
-            if (showAddStyleInput === false) {
-              handleShowAddStyleInput();
-            }
+            onToggleAddStyleInput?.(true);
           }}
           onBlur={() => {
             onToggleAddStyleInput?.(false);