fix: tanstack fields integration (#992)

* `Checkbox` bind `checked` instead `defaultChecked` to fix form reset
* `ColorPicker` use `handleChange` instead `setValue` and bind `onBlur`
* `NumericInput` bind `onBlur`
* `Switch` also bind `value` like `Checkbox`

NB about onBlur: tanstack `field.handleBlur` updates metadata of the field. It helps to compute if a field had been touched, So it is needed to ensure form state is coherent.

Author: tpoisseau

src/components/color-picker/color-picker-dropdown/ColorPickerDropdown.tsx

@@ -9,7 +9,12 @@ import * as colorHelper from '../react-color/helpers/color.js';
 
 export interface ColorPickerDropdownProps extends Pick<
   ColorPickerProps,
-  'color' | 'presetColors' | 'disableAlpha' | 'onChange' | 'onChangeComplete'
+  | 'color'
+  | 'presetColors'
+  | 'disableAlpha'
+  | 'onChange'
+  | 'onChangeComplete'
+  | 'onBlur'
 > {
   popoverProps?: Omit<PopoverProps, 'content'>;
 

src/components/color-picker/react-color/ColorPicker.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties, FocusEvent } from 'react';
 import { useCallback, useRef, useState } from 'react';
 
 import { debounce } from '../../utils/index.js';
@@ -51,6 +51,7 @@ export interface ColorPickerProps {
   disableAlpha?: boolean;
   onChange?: (props: ChangeCallbackProps, event?: Event) => void;
   onChangeComplete?: (props: ChangeCallbackProps, event?: Event) => void;
+  onBlur?: (event: FocusEvent<HTMLElement>) => void;
   onSwatchHover?: (props: ChangeCallbackProps, event?: Event) => void;
   style?: CSSProperties;
 }
@@ -149,6 +150,7 @@ export function ColorPicker(props: ColorPickerProps) {
     className = '',
     color = defaultColor,
     onChangeComplete,
+    onBlur,
     style = {},
   } = props;
 
@@ -200,19 +202,30 @@ export function ColorPicker(props: ColorPickerProps) {
   return (
     <div style={{ ...styles.picker(width), ...style }} className={className}>
       <div style={styles.saturationContainer}>
-        <Saturation hsl={hsl} hsv={hsv} onChange={handleChange} />
+        <Saturation
+          hsl={hsl}
+          hsv={hsv}
+          onChange={handleChange}
+          onBlur={onBlur}
+        />
       </div>
       <div style={styles.controls}>
         <div style={styles.sliders}>
           <div style={styles.hueContainer}>
-            <Hue style={styles.hueElement} hsl={hsl} onChange={handleChange} />
+            <Hue
+              style={styles.hueElement}
+              hsl={hsl}
+              onChange={handleChange}
+              onBlur={onBlur}
+            />
           </div>
           <div style={styles.alphaContainer(disableAlpha)}>
             <Alpha
               style={styles.alphaElement}
               rgb={rgb}
               hsl={hsl}
               onChange={handleChange}
+              onBlur={onBlur}
             />
           </div>
         </div>
@@ -227,6 +240,7 @@ export function ColorPicker(props: ColorPickerProps) {
         hex={hex}
         rgb={rgb}
         onChange={handleChange}
+        onBlur={onBlur}
         disableAlpha={disableAlpha}
       />
       <SketchPresetColors

src/components/color-picker/react-color/common/Alpha.tsx

@@ -107,6 +107,7 @@ const Alpha = (props) => {
         onMouseDown={mouseDownHandler}
         onTouchMove={handleChange}
         onTouchStart={handleChange}
+        onBlur={props.onBlur}
       >
         <div style={styles.pointer(direction, rgb)}>
           {props.pointer ? (

src/components/color-picker/react-color/common/EditableInput.tsx

@@ -50,11 +50,16 @@ const EditableInput = (props) => {
     [props.label],
   );
 
-  const handleBlur = useCallback(() => {
-    if (state.blurValue) {
-      setState({ value: state.blurValue, blurValue: null });
-    }
-  }, [state.blurValue]);
+  const onBlur = props.onBlur;
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      if (state.blurValue) {
+        setState({ value: state.blurValue, blurValue: null });
+      }
+      onBlur?.(event);
+    },
+    [state.blurValue, onBlur],
+  );
 
   const setUpdatedValue = useCallback(
     (value, e) => {

src/components/color-picker/react-color/common/Hue.tsx

@@ -89,6 +89,7 @@ const Hue = (props) => {
         onMouseDown={handleMouseDown}
         onTouchMove={handleChange}
         onTouchStart={handleChange}
+        onBlur={props.onBlur}
       >
         <div style={styles.pointer(direction, hsl)}>
           {pointer ? (

src/components/color-picker/react-color/common/Saturation.tsx

@@ -53,7 +53,7 @@ const styles = {
 };
 
 const Saturation = (props) => {
-  const { onChange, hsl, hsv, pointer } = props;
+  const { hsl, hsv, pointer, onChange, onBlur } = props;
 
   const throttleRef = useRef(
     throttle((fn, data, e) => {
@@ -85,6 +85,7 @@ const Saturation = (props) => {
       onMouseDown={handleMouseDown}
       onTouchMove={handleChange}
       onTouchStart={handleChange}
+      onBlur={onBlur}
     >
       <div style={styles.white()}>
         <div style={styles.black()} />

src/components/color-picker/react-color/sketch/SketchFields.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties, FocusEvent } from 'react';
 import { useCallback } from 'react';
 
 import type { HSL, RGB } from '../ColorPicker.js';
@@ -10,6 +10,7 @@ interface SketchFieldsProps {
     data: (RGB | HSL | { hex: string }) & { source: string },
     e: Event,
   ) => void;
+  onBlur?: (event: FocusEvent<HTMLElement>) => void;
   hsl: HSL;
   hex: string;
   rgb: RGB;
@@ -57,6 +58,7 @@ const styles: Record<
 
 const SketchFields = ({
   onChange,
+  onBlur,
   rgb,
   hsl,
   hex,
@@ -116,6 +118,7 @@ const SketchFields = ({
           label="hex"
           value={hex.replace('#', '')}
           onChange={handleChange}
+          onBlur={onBlur}
         />
       </div>
       <div style={styles.single}>
@@ -124,6 +127,7 @@ const SketchFields = ({
           label="r"
           value={rgb.r}
           onChange={handleChange}
+          onBlur={onBlur}
           dragLabel="true"
           dragMax="255"
         />
@@ -134,6 +138,7 @@ const SketchFields = ({
           label="g"
           value={rgb.g}
           onChange={handleChange}
+          onBlur={onBlur}
           dragLabel="true"
           dragMax="255"
         />
@@ -144,6 +149,7 @@ const SketchFields = ({
           label="b"
           value={rgb.b}
           onChange={handleChange}
+          onBlur={onBlur}
           dragLabel="true"
           dragMax="255"
         />
@@ -154,6 +160,7 @@ const SketchFields = ({
           label="a"
           value={Math.round(rgb.a * 100)}
           onChange={handleChange}
+          onBlur={onBlur}
           dragLabel="true"
           dragMax="100"
         />

src/components/form/components/input/checkbox.tsx

@@ -45,9 +45,9 @@ export function Checkbox(props: CheckboxProps) {
         label={label}
         name={field.name}
         value={String(field.state.value)}
+        checked={field.state.value}
         onChange={onChange}
         onBlur={field.handleBlur}
-        defaultChecked={field.state.value}
       />
     </FormGroup>
   );

src/components/form/components/input/color_picker.tsx

@@ -22,7 +22,7 @@ export function ColorPicker(props: ColorPickerProps) {
     .at(0);
 
   function onChange(color: ChangeCallbackComponentProps) {
-    field.setValue(color.hex);
+    field.handleChange(color.hex);
   }
 
   return (
@@ -40,6 +40,7 @@ export function ColorPicker(props: ColorPickerProps) {
         id={field.name}
         color={{ hex: field.state.value }}
         onChange={onChange}
+        onBlur={field.handleBlur}
         presetColors={presetColors}
         disableAlpha={disableAlpha}
         popoverProps={popoverProps}

src/components/form/components/input/numeric_input.tsx

@@ -58,6 +58,7 @@ export function NumericInput(props: NumericInputProps) {
         max={max}
         value={field.state.value ?? ''}
         onValueChange={onChange}
+        onBlur={field.handleBlur}
         intent={intent}
         placeholder={placeholder}
         required={required}