Skip to content

fix(controls): keep the number input controlled before the arg has a value - #965

Merged
dannyhw merged 2 commits into
storybookjs:nextfrom
Purv-Kabaria:fix/number-control-controlled-input
Nov 14, 2026
Merged

dannyhw merged 2 commits into
storybookjs:nextfrom
Purv-Kabaria:fix/number-control-controlled-input

Conversation

@Purv-Kabaria

Copy link
Copy Markdown
Contributor

Issue: #957

What I did

NumberType seeds numStr from arg.value?.toString(), so when the panel renders before the story's args are set, the input mounts with value={undefined} (uncontrolled). useResyncValue then sets a string and the input becomes controlled, which logs React's "changing an uncontrolled input to be controlled" warning on web. The input now falls back to '', as suggested in the issue. Added a patch changeset for @storybook/addon-ondevice-controls.

How to test

  1. Add a story with a number arg, e.g. args: { value: 5 }.
  2. Run the expo example on web and open the story's Controls panel.
  3. Before this change, the console shows the uncontrolled-to-controlled warning from NumberType. With it, there's no warning and the control still edits the arg.

No new example or docs needed.

@Purv-Kabaria
Purv-Kabaria requested a review from dannyhw as a code owner November 9, 2026 14:26
@changeset-bot

changeset-bot Bot commented Nov 9, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: c5eda84

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages
Name Type
@storybook/addon-ondevice-controls Patch
@storybook/addon-ondevice-actions Patch
@storybook/addon-ondevice-backgrounds Patch
@storybook/addon-ondevice-notes Patch
@storybook/react-native-theming Patch
@storybook/react-native-ui-common Patch
@storybook/react-native-ui-lite Patch
@storybook/react-native-ui Patch
@storybook/react-native Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@Purv-Kabaria

Copy link
Copy Markdown
Contributor Author

@dannyhw whenever you have a moment, this needs a workflow approval to run CI. It's the fix we discussed in #957. Happy to adjust anything.

@dannyhw

dannyhw commented Nov 11, 2026 •

Copy link
Copy Markdown
Member

@Purv-Kabaria approved, thanks for the contribution :)

@Purv-Kabaria

Copy link
Copy Markdown
Contributor Author

Thanks for approving this, Danny! The Check everything! job is green now too. Happy to make any final adjustments if needed; appreciate you taking the time to review :)

@dannyhw
dannyhw merged commit 519baac into storybookjs:next Nov 14, 2026
1 check passed
dannyhw added a commit that referenced this pull request Nov 14, 2026
Port the check/inline-check control (#972) and the number control fix (#965)
to the built-in controls in packages/react-native/src/controls. Move the
check control's PropField tests into @storybook/react-native, since
PropField is no longer reachable from the addon-ondevice-controls stub, and
retarget the check-control and number-control changesets to
@storybook/react-native.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants