Merge pull request #4611 from Ivy-Interactive/fix/bool-input-nullable-cycle

fix(widgets): resolve nullable boolean and numeric binding state three-state cycling and serialization

Author: rorychatt

src/Ivy/Widgets/Inputs/BoolInput.cs

@@ -101,14 +101,15 @@ internal BoolInput(string? label = null, bool disabled = false, BoolInputVariant
         Label = label;
         Disabled = disabled;
         Variant = variant;
+        Nullable = typeof(TBool) == typeof(bool?);
     }
 
-    internal BoolInput() { }
+    internal BoolInput()
+    {
+    }
 
     [Prop(AlwaysSerialize = true)] public TBool Value { get; init; } = default!;
 
-    [Prop] public new bool Nullable { get; set; } = typeof(TBool) == typeof(bool?);
-
     [Event] public EventHandler<Event<IInput<TBool>, TBool>>? OnChange { get; }
 }
 
@@ -154,8 +155,7 @@ public static BoolInputBase ToBoolInput(this IAnyState state, string? label = nu
         Type genericType = typeof(BoolInput<>).MakeGenericType(stateType);
 
         BoolInputBase input = (BoolInputBase)Activator.CreateInstance(genericType, BindingFlags.Instance | BindingFlags.NonPublic | BindingFlags.Public, null, new object?[] { state, label, disabled, variant }, null)!;
-        var nullableProperty = genericType.GetProperty("Nullable", BindingFlags.Public | BindingFlags.Instance | BindingFlags.DeclaredOnly);
-        nullableProperty?.SetValue(input, isNullable);
+        input.Nullable = isNullable;
 
         input.ScaffoldDefaults(null!, stateType);
         return input;

src/frontend/src/components/ui/checkbox.tsx

@@ -45,8 +45,14 @@ const Checkbox = React.forwardRef<
     },
     ref,
   ) => {
-    // Map undefined to null when nullable, then null to 'indeterminate' for Radix
-    const normalizedChecked = nullable && checked === undefined ? null : checked;
+    // Map checked value helper for safe boolean/null states
+    const normalizedChecked = React.useMemo(() => {
+      if (checked === undefined || checked === null) return nullable ? null : false;
+      if (checked === true || (checked as any) === 1) return true;
+      if (checked === false || (checked as any) === 0) return false;
+      return !!checked;
+    }, [checked, nullable]);
+
     const uiChecked =
       nullable && normalizedChecked === null ? "indeterminate" : !!normalizedChecked;
 

src/frontend/src/widgets/inputs/BoolInputWidget.tsx

@@ -95,13 +95,17 @@ const InputLabel: React.FC<{
   const cursorClass = onClick ? (disabled ? "cursor-not-allowed" : "cursor-pointer") : undefined;
 
   return (
-    <div onClick={onClick} className={cursorClass}>
+    <div onClick={onClick} className={cn("min-w-0 flex-1", cursorClass)}>
       {label && (
-        <Label htmlFor={id} className={labelSizeVariant({ density: d })}>
+        <Label htmlFor={id} className={cn("block truncate", labelSizeVariant({ density: d }))}>
           {label}
         </Label>
       )}
-      {description && <p className={descriptionSizeVariant({ density: d })}>{description}</p>}
+      {description && (
+        <p className={cn("block truncate", descriptionSizeVariant({ density: d }))}>
+          {description}
+        </p>
+      )}
     </div>
   );
 });
@@ -150,8 +154,10 @@ const VariantComponents = {
       const handleLabelClick = () => {
         if (disabled || loading) return;
         if (nullable) {
-          if (value === null) onCheckedChange(true);
-          else if (value === true) onCheckedChange(false);
+          const isTrue = value === true || (value as any) === 1;
+          const isNull = value === null || value === undefined;
+          if (isNull) onCheckedChange(true);
+          else if (isTrue) onCheckedChange(false);
           else onCheckedChange(null);
         } else {
           onCheckedChange(!value);
@@ -365,7 +371,12 @@ export const BoolInputWidget: React.FC<BoolInputWidgetProps> = ({
 }) => {
   const eventHandler = useEventHandler();
 
-  const normalizedValue = nullable && value === undefined ? null : value;
+  const normalizedValue = useMemo(() => {
+    if (value === undefined || value === null) return nullable ? null : false;
+    if (value === true || (value as any) === 1) return true;
+    if (value === false || (value as any) === 0) return false;
+    return !!value;
+  }, [value, nullable]);
 
   const [localValue, setLocalValue] = useOptimisticValue(normalizedValue, false);