feat: make tooltip non-interactive

gravity-ui · Jan 14, 2024 · 6142e26 · 6142e26
1 parent 10db4d6
commit 6142e26
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/src/components/Slider/SliderTooltip/SliderTooltip.scss b/src/components/Slider/SliderTooltip/SliderTooltip.scss
@@ -7,7 +7,7 @@ $block: '.#{variables.$ns-new}slider-tooltip';
     position: absolute;
     top: -#{sliderVariables.$slider-tooltip-height};
     transform: translateX(-50%);
-    // height: #{sliderVariables.$slider-tooltip-height};
+    cursor: default;
 
     &__card {
         position: relative;
@@ -17,7 +17,6 @@ $block: '.#{variables.$ns-new}slider-tooltip';
         border-radius: 4px;
         height: 24px;
         padding: 4px 4px 2px;
-        // margin-bottom: auto;
         background-color: #{sliderVariables.$slider-color};
         font-size: var(--g-text-body-1-font-size);
         color: #{sliderVariables.$handle-center-color};

diff --git a/src/components/Slider/SliderTooltip/SliderTooltip.tsx b/src/components/Slider/SliderTooltip/SliderTooltip.tsx
@@ -16,11 +16,25 @@ type SliderTooltipProps = {
     styleModifiers: Omit<StyleModifiers, 'withTooltip'>;
 };
 
-export const SliderTooltip = ({value, className, style, styleModifiers}: SliderTooltipProps) => (
-    <div className={b(styleModifiers, className)} style={style}>
-        <div className={b('card', styleModifiers)}>
-            {value}
-            <SliderTooltipPin className={b('pin')} />
+export const SliderTooltip = ({value, className, style, styleModifiers}: SliderTooltipProps) => {
+    const preventAction = React.useCallback((e: React.SyntheticEvent) => {
+        //make tooltip non-interactive
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+        <div
+            className={b(styleModifiers, className)}
+            style={style}
+            onClick={preventAction}
+            onMouseDown={preventAction}
+            onTouchStart={preventAction}
+        >
+            <div className={b('card', styleModifiers)}>
+                {value}
+                <SliderTooltipPin className={b('pin')} />
+            </div>
         </div>
-    </div>
-);
+    );
+};