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>(); const containerRef = useRef(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);