feat: Enhance Saturation component with focus behavior and ref management. #198

Author: jaywcjlove

packages/color-saturation/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import type * as CSS from 'csstype';
 import { HsvaColor, hsvaToHslaString } from '@uiw/color-convert';
 import Interactive, { type Interaction } from '@uiw/react-drag-event-interactive';
@@ -25,17 +25,40 @@ const Saturation = React.forwardRef<HTMLDivElement, SaturationProps>((props, ref
     position: 'relative',
   };
 
-  const handleChange = (interaction: Interaction, event: MouseEvent | TouchEvent) => {
-    onChange &&
-      hsva &&
-      onChange({
-        h: hsva.h,
-        s: interaction.left * 100,
-        v: (1 - interaction.top) * 100,
-        a: hsva.a,
-        // source: 'hsv',
-      });
-  };
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  // Combine external ref with internal ref
+  const combinedRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      containerRef.current = node;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref && 'current' in ref) {
+        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+      }
+    },
+    [ref],
+  );
+
+  const handleChange = useCallback(
+    (interaction: Interaction, event: MouseEvent | TouchEvent) => {
+      onChange &&
+        hsva &&
+        onChange({
+          h: hsva.h,
+          s: interaction.left * 100,
+          v: (1 - interaction.top) * 100,
+          a: hsva.a,
+          // source: 'hsv',
+        });
+      // Ensure the component maintains focus after drag interaction
+      const element = containerRef.current;
+      if (element) {
+        element.focus();
+      }
+    },
+    [hsva, onChange],
+  );
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -112,7 +135,7 @@ const Saturation = React.forwardRef<HTMLDivElement, SaturationProps>((props, ref
         ...containerStyle,
         outline: 'none',
       }}
-      ref={ref}
+      ref={combinedRef}
       onMove={handleChange}
       onDown={handleChange}
       onKeyDown={handleKeyDown}

test/convert.test.tsx

@@ -54,7 +54,7 @@ it('Converts color => HEX to ColorResult', () => {
   expect(hsla).toEqual({ h: 353.04347826086956, l: 41.37254901960784, s: 98.10426540284361, a: 1 });
   expect(hsv).toEqual({ h: 353.04347826086956, s: 99.04306220095694, v: 81.96078431372548 });
   expect(hsva).toEqual({ h: 353.04347826086956, s: 99.04306220095694, v: 81.96078431372548, a: 1 });
-  expect(xy).toEqual({ x: 0.26502656639062083, y: 0.13673307363113865, bri: 0.022196477290623275 });
+  expect(xy).toEqual({ x: 0.26502656639062083, y: 0.13673307363113865, bri: 0.022196477290623278 });
 });
 
 it('Converts color => HEXA to ColorResult', () => {

test/saturation.test.tsx

@@ -46,3 +46,44 @@ it('Saturation onChange', async () => {
   fireEvent.mouseDown(elm, { clientX: 1 });
   expect(handleChange).toHaveReturnedWith(['h', 's', 'v', 'a']);
 });
+
+it('Saturation focus behavior after interaction', () => {
+  const handleChange = jest.fn((color) => color);
+
+  const MyComponent = () => {
+    const [hsva, setHsva] = useState({ h: 200, s: 50, v: 80, a: 1 });
+    return (
+      <Saturation
+        title="focus-test-element"
+        hsva={hsva}
+        onChange={(newColor) => {
+          setHsva({ ...hsva, ...newColor, a: hsva.a });
+          handleChange(newColor);
+        }}
+      />
+    );
+  };
+
+  render(<MyComponent />);
+  const elm = screen.getByTitle('focus-test-element');
+
+  // Mock getBoundingClientRect for proper drag simulation
+  elm.getBoundingClientRect = jest.fn(() => ({
+    left: 0,
+    top: 0,
+    width: 200,
+    height: 200,
+    right: 200,
+    bottom: 200,
+  })) as any;
+
+  // Simulate mouse down which should trigger handleChange and focus
+  fireEvent.mouseDown(elm, { clientX: 100, clientY: 100, buttons: 1 });
+
+  // Verify that change was triggered
+  expect(handleChange).toHaveBeenCalled();
+
+  // Verify that the element maintains its ability to be focused
+  elm.focus();
+  expect(elm).toHaveAttribute('tabindex', '0');
+});