fix(ui): #3591716 boolean props auto-enable when another prop is changed

Alamgir Hossainrequested to merge
issue/canvas-3591716:3591716-fix-boolean-props-auto-enable into 1.x

Summary

  • Boolean props in Canvas component forms auto-enable when any other prop is changed.
  • Two root causes identified and fixed across 3 files.

Root causes & fixes

1. || [] coerces false to [] — layoutModelSlice.ts lines 559 & 566

During component drop, buildInitialData() ran prop.default_values?.resolved || []. For boolean props with default false: false || [] = [] (truthy empty array). Changed to ?? [] so false is preserved.

2. Twig renders element['#value'] as '0' during AJAX rebuilds — input--checkbox--inwidget-boolean-checkbox.html.twig

During Drupal AJAX form rebuilds (POST), Checkbox::valueCallback() returns integer 0 (not PHP boolean false) for an unchecked checkbox. Twig renders 0 as the string '0', which is truthy in JS (!!'0' === true), so DrupalToggle initialised isChecked = true.

Fixed by using element['#checked'] instead of element['#value']. #checked is set by processCheckbox() and is always a proper boolean. Template now only emits '1' or ''.

3. Defensive parseChecked() helper — DrupalToggle.tsx

Added a helper that explicitly treats '0' and 0 as false, replacing !!value coercion.

Test plan

  • Drop a component with boolean props (e.g. card-program from Vartheme BS5)
  • Verify all boolean toggles are OFF by default
  • Change any non-boolean prop (text field, media, etc.)
  • Confirm boolean toggles remain OFF
  • Toggle a boolean ON, change another prop, confirm it stays ON
  • Rebuild JS: npm run --workspace=@drupal-canvas/ui vite:build

AI disclosure

Patch developed with AI assistance (Claude Sonnet 4.6 by Anthropic). Human author reviewed the diff and validated on a live site. Per https://www.drupal.org/docs/develop/issues/issue-procedures-and-etiquette/policy-on-the-use-of-ai-when-contributing-to-drupal

🤖 Generated with Claude Code

Merge request reports