Add controlled input support to React adapter#40
Merged
Conversation
Components with cancelable change-request events now support React's controlled component pattern: - Controlled: pass value/checked prop + onChange handler. The wrapper intercepts change-request with preventDefault(), React owns state. - Uncontrolled: pass defaultValue/defaultChecked. Component manages itself, onChange fires for observation. Controlled components: x-checkbox, x-switch, x-radio, x-slider, x-text-area, x-select, x-combobox, x-currency-field, x-tabs, x-pagination. Test app updated with controlled checkbox, switch, and slider demos. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Instead of two separate event listeners for the change-request (one for controlled prevention, one for user callback), use a single wrapped handler that calls preventDefault when the control prop is provided, then forwards to the user's callback. Fixes slider controlled mode where the side value never updated. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds React controlled component pattern to 10 input components. When a
value(orchecked/page) prop is provided, the wrapper intercepts the component'schange-requestevent withpreventDefault()— React owns the state.Controlled components
checkeddefaultCheckedx-checkbox-change-requestcheckeddefaultCheckedx-switch-change-requestcheckeddefaultCheckedx-radio-change-requestvaluedefaultValuex-slider-change-requestvaluedefaultValuex-text-area-change-requestvaluedefaultValuex-select-change-requestvaluedefaultValuex-combobox-change-requestvaluedefaultValuex-currency-field-change-requestvaluedefaultValuevalue-change-requestpagedefaultPagepage-change-requestHow it works
preventDefault()when controlled, then forwards to user'sonChangeRequestcallbackdefaultChecked/defaultValue/defaultPagesets initial value, component manages itselfTest app
Updated with controlled checkbox, switch, and slider demos + uncontrolled switch with
defaultChecked.Test plan
bb scripts/generate_react.bb— generates 90 wrapperscd adapters/react && npx tsc --noEmit— zero type errorsdefaultChecked🤖 Generated with Claude Code