modus-checkbox-value-inversion-solidjs

ModusWcCheckbox Value Inversion Bug in SolidJS

🚨 CRITICAL BUG: Checkbox Value Inversion

Problem: The ModusWcCheckbox component has an inverted value property that causes unexpected behavior in SolidJS applications.

Bug Details:

• When checkbox is checked: target.value returns false
• When checkbox is unchecked: target.value returns true
• This is the opposite of what developers expect
• The bug occurs in the inputChange event's target.value property

❌ The Problem in Action

❌ Expected vs Actual Behavior

// ❌ WRONG: This doesn't work as expected
function CheckboxComponent() {
  const [isChecked, setIsChecked] = createSignal(false);

  const handleChange = (event: CustomEvent<InputEvent>) => {
    const value = (event.target as HTMLModusWcCheckboxElement).value; // ❌ This is inverted!
    console.log("Checkbox value:", value); // false when checked, true when unchecked
    setIsChecked(value); // ❌ This sets wrong state
  };

  return (
    <ModusWcCheckbox value={isChecked} onInputChange={handleChange}>
      Checkbox Label
    </ModusWcCheckbox>
  );
}

❌ Common Mistakes

// ❌ WRONG: Direct value usage
const handleChange = (event: CustomEvent<InputEvent>) => {
  const value = (event.target as HTMLModusWcCheckboxElement).value; // ❌ Inverted value
  setState(value); // ❌ Wrong state
};

// ❌ WRONG: Assuming value matches checked state
const handleChange = (event: CustomEvent<InputEvent>) => {
  const value = (event.target as HTMLModusWcCheckboxElement).value; // ❌ false when checked
  const isChecked = value; // ❌ Wrong assumption
  updateUI(isChecked); // ❌ Wrong UI state
};

✅ Solution: Use the ModusCheckbox Wrapper

✅ Best Practice: Use the Wrapper Component (Already Provided)

The ModusCheckbox wrapper in src/components/ModusCheckbox.tsx already handles the value inversion. Use it with these correct props:

// ✅ CORRECT: Use the wrapper with `value` prop (NOT `checked`)
<ModusCheckbox
  value={isChecked()}           // NOT "checked" - this prop does not exist
  indeterminate={isSomeSelected()} // optional: for partial selection states
  onValueChange={(e) => {       // NOT "onInputChange"
    const corrected = e.detail; // Already inverted by wrapper
    setChecked(corrected);
  }}
  size="sm"                     // "sm" | "md" | "lg"
/>

// ❌ WRONG: "checked" prop fails silently
<ModusCheckbox checked={isChecked()} />