From a8146c5493d384294f2cdbff443d4fa716e27ee7 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Mon, 24 Feb 2025 14:21:20 +0000
Subject: [PATCH] fix: Fix reset on gap icons (#4908)

Closes https://github.com/webstudio-is/webstudio/issues/4861
## Description

1. reset with option/alt + click on icon without waiting for a tooltip
to click reset button
2. can't click on icon to open the tooltip

## Steps for reproduction

1. click button
2. 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
---
 .../style-panel/sections/layout/layout.tsx       |  3 ++-
 .../shared/css-value-input/css-value-input.tsx   | 16 ++++++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx b/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx
index 086f241acc..6f31b175ff 100644
--- a/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx
@@ -94,12 +94,13 @@ const GapTooltip = ({
       // prevent closing tooltip on content click
       onPointerDown={(event) => event.preventDefault()}
       triggerProps={{
-        onClick: (event) => {
+        onClick(event) {
           if (event.altKey) {
             event.preventDefault();
             onReset();
             return;
           }
+          setIsOpen(true);
         },
       }}
       content={
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx b/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx
index 092519209d..97ae60c8fc 100644
--- a/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx
+++ b/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx
@@ -35,6 +35,7 @@ import {
   useState,
   useMemo,
   type ComponentProps,
+  type RefObject,
 } from "react";
 import { useUnitSelect, type UnitOption } from "./unit-select";
 import { parseIntermediateOrInvalidValue } from "./parse-intermediate-or-invalid-value";
@@ -99,11 +100,11 @@ const useScrub = ({
   onAbort: () => void;
   shouldHandleEvent?: (node: Node) => boolean;
 }): [
-  React.RefObject<HTMLDivElement | null>,
-  React.RefObject<HTMLInputElement | null>,
+  RefObject<HTMLInputElement | null>,
+  RefObject<HTMLInputElement | null>,
 ] => {
-  const scrubRef = useRef<HTMLDivElement | null>(null);
-  const inputRef = useRef<HTMLInputElement | null>(null);
+  const scrubRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const onChangeRef = useRef(onChange);
   const onChangeCompleteRef = useRef(onChangeComplete);
@@ -991,8 +992,11 @@ export const CssValueInput = ({
             autoFocus={autoFocus}
             onBlur={handleOnBlur}
             onKeyDown={inputPropsHandleKeyDown}
-            containerRef={disabled ? undefined : scrubRef}
-            inputRef={mergeRefs(inputRef, props.inputRef ?? null)}
+            inputRef={mergeRefs(
+              inputRef,
+              props.inputRef,
+              disabled ? undefined : scrubRef
+            )}
             name={property}
             color={value.type === "invalid" ? "error" : undefined}
             prefix={finalPrefix}