feat: Backspace to reset the value in CSS Value Input (#4878)

## Description

1. improved composeEventHandlers implementation
2. delete value text, then hit backspace - same as reset
3. in advanced panel all property tooltips now show "Delete property"
wording instead of "Reset value"

<img width="363" alt="image"
src="https://github.com/user-attachments/assets/f4ad7ec4-892c-4774-9143-ac2b26c55cde"
/>


## Steps for reproduction

1. click button
4. expect xyz

## 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

Author: kof

apps/builder/app/builder/features/style-panel/property-label.tsx

@@ -73,13 +73,15 @@ export const PropertyInfo = ({
   description,
   styles,
   onReset,
+  resetType = "reset",
 }: {
   title: string;
   code?: string;
   link?: string;
   description: ReactNode;
   styles: ComputedStyleDecl[];
   onReset: () => void;
+  resetType?: "reset" | "delete";
 }) => {
   const breakpoints = useStore($breakpoints);
   const instances = useStore($instances);
@@ -203,9 +205,7 @@ export const PropertyInfo = ({
           css={{ gridTemplateColumns: "1fr max-content 1fr" }}
           onClick={onReset}
         >
-          {styles[0].property.startsWith("--")
-            ? "Delete variable"
-            : "Reset value"}
+          {resetType === "delete" ? "Delete property" : "Reset value"}
         </Button>
       )}
     </Flex>

apps/builder/app/builder/features/style-panel/sections/advanced/add-styles-input.tsx

@@ -178,31 +178,34 @@ export const AddStylesInput = forwardRef<
     setItem({ property: "", label: "" });
   };
 
-  const handleKeys = (event: KeyboardEvent) => {
-    // Dropdown might handle enter or escape.
-    if (event.defaultPrevented) {
-      return;
-    }
+  const handleEnter = (event: KeyboardEvent) => {
     if (event.key === "Enter") {
       clear();
       onSubmit(item.property);
-      return;
     }
-    // When user hits backspace and there is nothing in the input - we hide the input
-    const abortByBackspace =
-      event.key === "Backspace" && combobox.inputValue === "";
+  };
 
-    if (event.key === "Escape" || abortByBackspace) {
+  const handleEscape = (event: KeyboardEvent) => {
+    if (event.key === "Escape") {
       clear();
       onClose();
-      event.preventDefault();
     }
   };
 
-  const handleKeyDown = composeEventHandlers(inputProps.onKeyDown, handleKeys, {
-    // Pass prevented events to the combobox (e.g., the Escape key doesn't work otherwise, as it's blocked by Radix)
-    checkForDefaultPrevented: false,
-  });
+  const handleDelete = (event: KeyboardEvent) => {
+    // When user hits backspace and there is nothing in the input - we hide the input
+    if (event.key === "Backspace" && combobox.inputValue === "") {
+      clear();
+      onClose();
+    }
+  };
+
+  const handleKeyDown = composeEventHandlers([
+    inputProps.onKeyDown,
+    handleEnter,
+    handleEscape,
+    handleDelete,
+  ]);
 
   return (
     <ComboboxRoot open={combobox.isOpen}>

apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx

@@ -157,6 +157,7 @@ const AdvancedPropertyLabel = ({
             setIsOpen(false);
             onReset?.();
           }}
+          resetType="delete"
         />
       }
     >
@@ -178,13 +179,15 @@ const AdvancedPropertyValue = ({
   autoFocus,
   property,
   onChangeComplete,
+  onReset,
   inputRef: inputRefProp,
 }: {
   autoFocus?: boolean;
   property: StyleProperty;
   onChangeComplete: ComponentProps<
     typeof CssValueInputContainer
   >["onChangeComplete"];
+  onReset: ComponentProps<typeof CssValueInputContainer>["onReset"];
   inputRef?: RefObject<HTMLInputElement>;
 }) => {
   const styleDecl = useComputedStyleDecl(property);
@@ -245,6 +248,7 @@ const AdvancedPropertyValue = ({
       }}
       deleteProperty={deleteProperty}
       onChangeComplete={onChangeComplete}
+      onReset={onReset}
     />
   );
 };
@@ -340,6 +344,7 @@ const AdvancedProperty = memo(
                 autoFocus={autoFocus}
                 property={property}
                 onChangeComplete={onChangeComplete}
+                onReset={onReset}
                 inputRef={valueInputRef}
               />
             </Box>

apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input-container.tsx

@@ -16,13 +16,15 @@ type CssValueInputContainerProps = {
   | "onChangeComplete"
 > & {
     onChangeComplete?: ComponentProps<typeof CssValueInput>["onChangeComplete"];
+    onReset?: ComponentProps<typeof CssValueInput>["onReset"];
   };
 
 export const CssValueInputContainer = ({
   property,
   setValue,
   deleteProperty,
   onChangeComplete,
+  onReset,
   ...props
 }: CssValueInputContainerProps) => {
   const [intermediateValue, setIntermediateValue] = useState<
@@ -62,7 +64,9 @@ export const CssValueInputContainer = ({
         deleteProperty(property, { isEphemeral: true });
       }}
       onReset={() => {
+        setIntermediateValue(undefined);
         deleteProperty(property);
+        onReset?.();
       }}
     />
   );

apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx

@@ -277,7 +277,9 @@ type CssValueInputProps = Pick<
   onChange: (value: CssValueInputValue | undefined) => void;
   onChangeComplete: (event: ChangeCompleteEvent) => void;
   onHighlight: (value: StyleValue | undefined) => void;
+  // Does not reset intermediate changes.
   onAbort: () => void;
+  // Resets the value to default even if it has intermediate changes.
   onReset: () => void;
   icon?: ReactNode;
   showSuffix?: boolean;
@@ -798,7 +800,7 @@ export const CssValueInput = ({
     }
   };
 
-  const handleMetaEnter = (event: KeyboardEvent<HTMLInputElement>) => {
+  const handleEnter = (event: KeyboardEvent<HTMLInputElement>) => {
     if (
       isUnitsOpen ||
       (isOpen && !menuProps.empty && highlightedIndex !== -1)
@@ -813,6 +815,16 @@ export const CssValueInput = ({
     }
   };
 
+  const handleDelete = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Backspace" && inputProps.value === "") {
+      // - allows to close the menu
+      // - prevents baspace from deleting the value AFTER its already reseted to default, e.g. we get "aut" instead of "auto"
+      event.preventDefault();
+      //closeMenu();
+      onReset();
+    }
+  };
+
   const { abort, ...autoScrollProps } = useMemo(() => {
     return getAutoScrollProps();
   }, []);
@@ -860,11 +872,11 @@ export const CssValueInput = ({
   }, [inputRef]);
 
   const inputPropsHandleKeyDown = composeEventHandlers(
-    composeEventHandlers(handleUpDownNumeric, inputProps.onKeyDown, {
+    [handleUpDownNumeric, inputProps.onKeyDown, handleEnter, handleDelete],
+    {
       // Pass prevented events to the combobox (e.g., the Escape key doesn't work otherwise, as it's blocked by Radix)
       checkForDefaultPrevented: false,
-    }),
-    handleMetaEnter
+    }
   );
 
   const suffixRef = useRef<HTMLDivElement | null>(null);

apps/builder/app/shared/event-utils.test.ts

@@ -0,0 +1,46 @@
+import { describe, test, expect, vi } from "vitest";
+import { composeEventHandlers } from "./event-utils";
+
+describe("composeEventHandlers", () => {
+  test("executes handlers in sequence", () => {
+    const handler1 = vi.fn();
+    const handler2 = vi.fn();
+    const event = {};
+
+    const composed = composeEventHandlers([handler1, handler2]);
+    composed(event);
+
+    expect(handler1).toHaveBeenCalledWith(event);
+    expect(handler2).toHaveBeenCalledWith(event);
+  });
+
+  test("stops execution if event.defaultPrevented is true", () => {
+    const handler1 = vi.fn((event) => {
+      event.defaultPrevented = true;
+    });
+    const handler2 = vi.fn();
+    const event = {};
+
+    const composed = composeEventHandlers([handler1, handler2]);
+    composed(event);
+
+    expect(handler1).toHaveBeenCalled();
+    expect(handler2).not.toHaveBeenCalled();
+  });
+
+  test("continues execution when checkForDefaultPrevented is false", () => {
+    const handler1 = vi.fn((event) => {
+      event.defaultPrevented = true;
+    });
+    const handler2 = vi.fn();
+    const event = {};
+
+    const composed = composeEventHandlers([handler1, handler2], {
+      checkForDefaultPrevented: false,
+    });
+    composed(event);
+
+    expect(handler1).toHaveBeenCalled();
+    expect(handler2).toHaveBeenCalled();
+  });
+});

apps/builder/app/shared/event-utils.ts

@@ -1,42 +1,20 @@
 /*
-https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx
-
-MIT License
-
-Copyright (c) 2022 WorkOS
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-*/
-
-export const composeEventHandlers = <E>(
-  originalEventHandler?: (event: E) => void,
-  ourEventHandler?: (event: E) => void,
+ * Inspired by
+ * https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx
+ */
+export const composeEventHandlers = <CustomEvent>(
+  handlers: Array<(event: CustomEvent) => void>,
   { checkForDefaultPrevented = true } = {}
 ) => {
-  return function handleEvent(event: E) {
-    originalEventHandler?.(event);
-
-    if (
-      checkForDefaultPrevented === false ||
-      !(event as unknown as Event).defaultPrevented
-    ) {
-      return ourEventHandler?.(event);
+  return function handleEvent(event: CustomEvent) {
+    for (const handler of handlers) {
+      handler?.(event);
+      if (
+        checkForDefaultPrevented &&
+        (event as unknown as Event).defaultPrevented
+      ) {
+        break;
+      }
     }
   };
 };