RangeControl: Improve initial hover interaction with Tooltip

packages/components/src/range-control/index.js

@@ -8,13 +8,7 @@ import { clamp, noop } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	useCallback,
-	useRef,
-	useEffect,
-	useState,
-	forwardRef,
-} from '@wordpress/element';
+import { useRef, useState, forwardRef } from '@wordpress/element';
 import { compose, withInstanceId } from '@wordpress/compose';
 
 /**
@@ -25,6 +19,8 @@ import Button from '../button';
 import Dashicon from '../dashicon';
 
 import { color } from '../utils/colors';
+
+import { useControlledRangeValue, useDebouncedHoverInteraction } from './utils';
 import RangeRail from './rail';
 import SimpleTooltip from './tooltip';
 import {
@@ -93,7 +89,9 @@ const BaseRangeControl = forwardRef(
 			}
 		};
 
+		const isCurrentlyFocused = inputRef.current?.matches( ':focus' );
 		const isThumbFocused = ! disabled && isFocused;
+
 		const fillValue = ( ( value - min ) / ( max - min ) ) * 100;
 		const fillValueOffset = `${ clamp( fillValue, 0, 100 ) }%`;
 
@@ -219,7 +217,7 @@ const BaseRangeControl = forwardRef(
 								className="components-range-control__tooltip"
 								inputRef={ inputRef }
 								renderTooltipContent={ renderTooltipContent }
-								show={ showTooltip || showTooltip }
+								show={ isCurrentlyFocused || showTooltip }
 								style={ offsetStyle }
 								value={ value }
 							/>
@@ -262,84 +260,6 @@ const BaseRangeControl = forwardRef(
 	}
 );
 
-/**
- * A float supported clamp function for a specific value.
- *
- * @param {number} value The value to clamp
- * @param {number} min The minimum value
- * @param {number} max The maxinum value
- * @return {number} A (float) number
- */
-function floatClamp( value, min, max ) {
-	return parseFloat( clamp( value, min, max ) );
-}
-
-/**
- * Hook to store a clamped value, derived from props.
- */
-function useControlledRangeValue( { min, max, value: valueProp = 0 } ) {
-	const [ value, _setValue ] = useState( floatClamp( valueProp, min, max ) );
-	const valueRef = useRef( value );
-
-	const setValue = useCallback(
-		( nextValue ) => {
-			_setValue( floatClamp( nextValue, min, max ) );
-		},
-		[ _setValue, min, max ]
-	);
-
-	useEffect( () => {
-		if ( valueRef.current !== valueProp ) {
-			setValue( valueProp );
-			valueRef.current = valueProp;
-		}
-	}, [ valueRef, valueProp, setValue ] );
-
-	return [ value, setValue ];
-}
-
-/**
- * Hook to encapsulate the debouncing "hover" to better handle the showing
- * and hiding of the Tooltip.
- */
-function useDebouncedHoverInteraction( {
-	onShow = noop,
-	onHide = noop,
-	onMouseEnter = noop,
-	onMouseLeave = noop,
-	timeout = 250,
-} ) {
-	const [ show, setShow ] = useState( false );
-	const timeoutRef = useRef();
-
-	const handleOnMouseEnter = useCallback( ( event ) => {
-		onMouseEnter( event );
-
-		if ( timeoutRef.current ) {
-			window.clearTimeout( timeoutRef.current );
-		}
-
-		if ( ! show ) {
-			setShow( true );
-			onShow();
-		}
-	}, [] );
-
-	const handleOnMouseLeave = useCallback( ( event ) => {
-		onMouseLeave( event );
-
-		timeoutRef.current = setTimeout( () => {
-			setShow( false );
-			onHide();
-		}, timeout );
-	}, [] );
-
-	return {
-		onMouseEnter: handleOnMouseEnter,
-		onMouseLeave: handleOnMouseLeave,
-	};
-}
-
 export const RangeControlNext = compose( withInstanceId )( BaseRangeControl );
 
 export default RangeControlNext;

packages/components/src/range-control/stories/index.js

@@ -153,6 +153,17 @@ export const customMarks = () => {
 	);
 };
 
+export const multiple = () => {
+	return (
+		<Wrapper>
+			<RangeControlWithState />
+			<RangeControlWithState />
+			<RangeControlWithState />
+			<RangeControlWithState />
+		</Wrapper>
+	);
+};
+
 const Wrapper = styled.div`
 	padding: 60px 40px;
 `;

packages/components/src/range-control/utils.js

@@ -0,0 +1,97 @@
+/**
+ * External dependencies
+ */
+import { clamp, noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useRef, useEffect, useState } from '@wordpress/element';
+
+/**
+ * A float supported clamp function for a specific value.
+ *
+ * @param {number} value The value to clamp
+ * @param {number} min The minimum value
+ * @param {number} max The maxinum value
+ * @return {number} A (float) number
+ */
+function floatClamp( value, min, max ) {
+	return parseFloat( clamp( value, min, max ) );
+}
+
+/**
+ * Hook to store a clamped value, derived from props.
+ */
+export function useControlledRangeValue( { min, max, value: valueProp = 0 } ) {
+	const [ value, _setValue ] = useState( floatClamp( valueProp, min, max ) );
+	const valueRef = useRef( value );
+
+	const setValue = ( nextValue ) => {
+		_setValue( floatClamp( nextValue, min, max ) );
+	};
+
+	useEffect( () => {
+		if ( valueRef.current !== valueProp ) {
+			setValue( valueProp );
+			valueRef.current = valueProp;
+		}
+	}, [ valueProp, setValue ] );
+
+	return [ value, setValue ];
+}
+
+/**
+ * Hook to encapsulate the debouncing "hover" to better handle the showing
+ * and hiding of the Tooltip.
+ */
+export function useDebouncedHoverInteraction( {
+	onShow = noop,
+	onHide = noop,
+	onMouseEnter = noop,
+	onMouseLeave = noop,
+	timeout = 300,
+} ) {
+	const [ show, setShow ] = useState( false );
+	const timeoutRef = useRef();
+
+	const setDebouncedTimeout = useCallback(
+		( callback ) => {
+			window.clearTimeout( timeoutRef.current );
+
+			timeoutRef.current = setTimeout( callback, timeout );
+		},
+		[ timeout ]
+	);
+
+	const handleOnMouseEnter = useCallback( ( event ) => {
+		onMouseEnter( event );
+
+		setDebouncedTimeout( () => {
+			if ( ! show ) {
+				setShow( true );
+				onShow();
+			}
+		} );
+	}, [] );
+
+	const handleOnMouseLeave = useCallback( ( event ) => {
+		onMouseLeave( event );
+
+		setDebouncedTimeout( () => {
+			setShow( false );
+			onHide();
+		} );
+	}, [] );
+
+	useEffect( () => {
+		return () => {
+			window.clearTimeout( timeoutRef.current );
+		};
+	} );
+
+	return {
+		onMouseEnter: handleOnMouseEnter,
+		onMouseLeave: handleOnMouseLeave,
+	};
+}