modus-checkbox-value-inversion-react

ModusWcCheckbox Value Inversion Bug in React

🚨 CRITICAL BUG: Checkbox Value Inversion

Problem: The ModusWcCheckbox component has an inverted value property that causes unexpected behavior in React 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] = useState(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: Invert the Value

✅ Correct Pattern: Invert the Value

// ✅ CORRECT: Always invert the value
function CheckboxComponent() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChange = (event: CustomEvent<InputEvent>) => {
    const value = (event.target as HTMLModusWcCheckboxElement).value;
    const actualChecked = !value; // ✅ CORRECT: Invert the value
    console.log("Checkbox value:", value); // false when checked
    console.log("Actual checked:", actualChecked); // true when checked
    setIsChecked(actualChecked);
  };

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