[WC-2518]: Fix range-slider-web tooltip positioning

packages/pluggableWidgets/range-slider-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue where tooltip of the slider wouldn't position itself correctly when scrolling the page.
+
 ## [2.1.1] - 2023-09-27
 
 ### Fixed

packages/pluggableWidgets/range-slider-web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mendix/range-slider-web",
   "widgetName": "RangeSlider",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Change a range of values on a slider",
   "copyright": "© Mendix Technology BV 2023. All rights reserved.",
   "repository": {

packages/pluggableWidgets/range-slider-web/src/RangeSlider.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, createElement, useMemo } from "react";
+import { ReactNode, createElement, useMemo, useRef } from "react";
 import { RangeSliderContainerProps } from "../typings/RangeSliderProps";
 import { RangeSlider as RangeSliderComponent } from "./components/RangeSlider";
 import { createHandleGenerator } from "./utils/createHandleGenerator";
@@ -77,6 +77,7 @@ export function RangeSlider(props: RangeSliderContainerProps): ReactNode {
         maxAttribute,
         expressionMaximumValue
     });
+    const sliderRef = useRef<HTMLDivElement>(null);
     const { onChange } = useOnChangeDebounced({ lowerBoundAttribute, upperBoundAttribute, onChange: onChangeProp });
     const style = getStyleProp({ orientation, height, heightUnit });
     useScheduleUpdateOnce(() => lowerBoundAttribute.status === ValueStatus.Available);
@@ -99,8 +100,10 @@ export function RangeSlider(props: RangeSliderContainerProps): ReactNode {
                 showTooltip,
                 tooltipTypeLower,
                 tooltipTypeUpper,
-                tooltipAlwaysVisible
+                tooltipAlwaysVisible,
+                sliderRef
             })}
+            ref={sliderRef}
         />
     );
 }

packages/pluggableWidgets/range-slider-web/src/components/RangeSlider.tsx

@@ -1,4 +1,4 @@
-import { createElement, CSSProperties } from "react";
+import { createElement, CSSProperties, forwardRef, RefObject } from "react";
 import { Range, RangeProps } from "rc-slider";
 import classNames from "classnames";
 
@@ -7,22 +7,23 @@ export interface RangeSliderProps extends RangeProps {
     rootStyle?: CSSProperties;
 }
 
-export const RangeSlider = ({
-    className,
-    classNameSlider,
-    rootStyle,
-    ...rcRangeProps
-}: RangeSliderProps): JSX.Element => (
-    <div
-        style={rootStyle}
-        className={classNames(
-            "widget-range-slider",
-            {
-                "widget-range-slider-vertical": rcRangeProps.vertical
-            },
-            className
-        )}
-    >
-        <Range className={classNameSlider} {...rcRangeProps} />
-    </div>
+export const RangeSlider = forwardRef(
+    (
+        { className, classNameSlider, rootStyle, ...rcRangeProps }: RangeSliderProps,
+        sliderRef: RefObject<HTMLDivElement>
+    ): JSX.Element => (
+        <div
+            ref={sliderRef}
+            style={rootStyle}
+            className={classNames(
+                "widget-range-slider",
+                {
+                    "widget-range-slider-vertical": rcRangeProps.vertical
+                },
+                className
+            )}
+        >
+            <Range className={classNameSlider} {...rcRangeProps} />
+        </div>
+    )
 );

packages/pluggableWidgets/range-slider-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="RangeSlider" version="2.1.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="RangeSlider" version="2.1.2" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="RangeSlider.xml" />
         </widgetFiles>

packages/pluggableWidgets/range-slider-web/src/utils/createHandleGenerator.tsx

@@ -1,4 +1,4 @@
-import { createElement } from "react";
+import { createElement, RefObject } from "react";
 import Tooltip from "rc-tooltip";
 import { Handle, HandleProps } from "rc-slider";
 import { DynamicValue } from "mendix";
@@ -9,7 +9,7 @@ interface HandleGeneratorProps extends HandleProps {
     index: number;
 }
 
-type HandleGenerator = (props: HandleGeneratorProps) => JSX.Element;
+type HandleGenerator = (props: HandleGeneratorProps) => JSX.Element | undefined;
 
 type CreateHandleGeneratorParams = {
     showTooltip: boolean;
@@ -18,23 +18,37 @@ type CreateHandleGeneratorParams = {
     tooltipTypeLower: "value" | "customText";
     tooltipTypeUpper: "value" | "customText";
     tooltipAlwaysVisible: boolean;
+    sliderRef: RefObject<HTMLDivElement>;
 };
 
 export function createHandleGenerator(props: CreateHandleGeneratorParams): HandleGenerator | undefined {
-    const { tooltipLower, tooltipUpper, showTooltip, tooltipTypeLower, tooltipTypeUpper, tooltipAlwaysVisible } = props;
+    const {
+        tooltipLower,
+        tooltipUpper,
+        showTooltip,
+        tooltipTypeLower,
+        tooltipTypeUpper,
+        tooltipAlwaysVisible,
+        sliderRef
+    } = props;
     const tooltipTypeCheck = [tooltipTypeLower === "customText", tooltipTypeUpper === "customText"];
     const tooltipValue = [tooltipLower, tooltipUpper];
 
     if (!showTooltip) {
         return;
     }
 
-    return function handleGenerator(generatorProps: HandleGeneratorProps): JSX.Element {
+    return function handleGenerator(generatorProps: HandleGeneratorProps): JSX.Element | undefined {
         const { dragging, index, ...restProps } = generatorProps;
         const isCustomText = tooltipTypeCheck[index];
 
+        if (!sliderRef.current) {
+            return;
+        }
+
         return (
             <Tooltip
+                getTooltipContainer={() => sliderRef.current!}
                 prefixCls="rc-slider-tooltip"
                 overlay={isCustomText ? <div>{tooltipValue[index]?.value ?? ""}</div> : restProps.value}
                 trigger={["hover", "click", "focus"]}