allow adding properties with tab in the last value

webstudio-is · Feb 8, 2025 · eca1cf7 · eca1cf7
1 parent 2c46cdc
commit eca1cf7
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -558,7 +558,7 @@ export const Section = () => {
             }}
           />
         ))}
-        {isAdding && (
+        {isAdding ? (
           <AddProperty
             onSelect={(property) => {
               setIsAdding(false);
@@ -575,6 +575,14 @@ export const Section = () => {
             }}
             onClose={() => setIsAdding(false)}
           />
+        ) : (
+          // This empty div allows showing the add property input on tab in the last value
+          <div
+            tabIndex={0}
+            onFocus={() => {
+              setIsAdding(true);
+            }}
+          />
         )}
       </Box>
       {recentProperties.length > 0 && <Separator />}