fix: slider: increase vertical hit target and handle segmented gap cl…

…icks (#635) * fix: slider: increase vertical hit target and handle segmented gap clicks * fix: slider: ensure default behavior of tooltip does not hide on reference click
EightfoldAI · Jun 6, 2023 · b4cad7b · b4cad7b
1 parent 693ee85
commit b4cad7b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 0 deletions.
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
@@ -568,6 +568,14 @@ export const Slider: FC<SliderProps> = React.forwardRef(
       }
     };
 
+    const onSliderHitTargetClick = (
+      event: React.MouseEvent<HTMLDivElement>
+    ): void => {
+      event.preventDefault();
+
+      onSliderMouseDown(event);
+    };
+
     const onSliderMouseDown = (
       event: React.MouseEvent<HTMLDivElement>
     ): void => {
@@ -726,6 +734,14 @@ export const Slider: FC<SliderProps> = React.forwardRef(
               ref={sliderRef}
               className={mergeClasses(styles.slider, classNames)}
             >
+              <div
+                className={styles.sliderHitTarget}
+                onClick={
+                  !allowDisabledFocus && !readOnly
+                    ? onSliderHitTargetClick
+                    : null
+                }
+              />
               <div
                 ref={railRef}
                 className={mergeClasses([
@@ -825,6 +841,7 @@ export const Slider: FC<SliderProps> = React.forwardRef(
                     styles.sliderTooltip,
                     tooltipProps?.classNames,
                   ])}
+                  closeOnReferenceClick={false}
                   content={getTooltipContentByValue(val)}
                   key={`value-tooltip-${index}`}
                   offset={thumbGeometry().diameter + THUMB_TOOLTIP_Y_OFFSET}

diff --git a/src/components/Slider/slider.module.scss b/src/components/Slider/slider.module.scss
@@ -138,6 +138,18 @@ $small-min-label-offset-with-steps: 0;
     }
   }
 
+  .rail-marker-segments {
+    pointer-events: none;
+  }
+
+  .slider-hit-target {
+    cursor: pointer;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    width: 100%;
+  }
+
   .slider-rail,
   .slider-track,
   .rail-marker-segments {

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -177,6 +177,7 @@ export const Tooltip: FC<TooltipProps> = React.memo(
           }
           if (
             !closeOnReferenceClick &&
+            referenceElement &&
             !referenceElement.contains(e.target as Node)
           ) {
             toggle(false)(e);