Skip to content

fix: NumberInput react controlled vs uncontrolled handling#22139

Merged
heloiselui merged 6 commits into
carbon-design-system:mainfrom
devadula-nandan:number-input-controlled-fix
May 6, 2026
Merged

fix: NumberInput react controlled vs uncontrolled handling#22139
heloiselui merged 6 commits into
carbon-design-system:mainfrom
devadula-nandan:number-input-controlled-fix

Conversation

@devadula-nandan

@devadula-nandan devadula-nandan commented Apr 29, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Closes #22138

properly differentiates the responsibilities of value, defaultValue. to handle controlled, uncontrolled behavoirs for number input.
this may be a breaking change. but this behavior is wrong in the first place when i looked at the code.
what i believe is a standard is.
we have to make use of
defaultValue if the intention of the component usage is uncontrolled.
value if the intention is controlled.

references (external, try to check the component behaviors in this example)
https://stackblitz.com/edit/1zghp4qj?file=src%2FDemo.tsx

Changelog

Changed

  • add a condition to set the internal value only if the component is uncontrolled
  • re-organized tests to show controlled and uncontrolled blocks seperately for clarity. with comments.
Screenshot 2026-05-04 at 12 25 07 PM

Testing / Reviewing

corresponding controlled tests are added, and they should pass
for manual testing the stackblitz reproduction can be added in a test story and checked.

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

  • Reviewed every line of the diff
  • Updated documentation and storybook examples
  • Wrote passing tests that cover this change
  • Addressed any impact on accessibility (a11y)
  • Tested for cross-browser consistency
  • Validated that this code is ready for review and status checks should pass

More details can be found in the pull request guide

@netlify

netlify Bot commented Apr 29, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-react ready!

Name Link
🔨 Latest commit f837834
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/69fb042efcb7a600090aee31
😎 Deploy Preview https://deploy-preview-22139--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Apr 29, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-web-components ready!

Name Link
🔨 Latest commit f837834
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/69fb042e98c5ca000861febc
😎 Deploy Preview https://deploy-preview-22139--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@devadula-nandan devadula-nandan marked this pull request as ready for review April 29, 2026 10:48
@devadula-nandan devadula-nandan requested a review from a team as a code owner April 29, 2026 10:48
@codecov

codecov Bot commented Apr 29, 2026 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.10%. Comparing base (e46239c) to head (f837834).

Additional details and impacted files 
@@            Coverage Diff             @@
##             main   #22139      +/-   ##
==========================================
- Coverage   95.13%   95.10%   -0.03%     
==========================================
  Files         549      549              
  Lines       45642    45644       +2     
  Branches     6526     6556      +30     
==========================================
- Hits        43423    43412      -11     
- Misses       2089     2102      +13     
  Partials      130      130
Flag Coverage Δ
main-packages 89.16% <100.00%> (+<0.01%) ⬆️
web-components 97.89% <ø> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@devadula-nandan devadula-nandan changed the title fix: number input react controlled vs uncontrolled handling fix: NumberInput react controlled vs uncontrolled handling Apr 29, 2026
adamalston
adamalston reviewed Apr 30, 2026
View reviewed changes

@adamalston adamalston left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, none of the checklist items are marked as complete, but this pull request is not in draft status. What is the expectation here?

@devadula-nandan

devadula-nandan commented Apr 30, 2026

Copy link
Copy Markdown
Contributor Author

Hmm, none of the checklist items are marked as complete, but this pull request is not in draft status. What is the expectation here?

After opening the PR, I reviewed the tests and stories to see if they could be reorganized for better clarity around this intention. I’ll move it to draft for now.

@devadula-nandan devadula-nandan marked this pull request as draft April 30, 2026 18:28
@devadula-nandan devadula-nandan marked this pull request as ready for review May 4, 2026 07:16
@devadula-nandan

devadula-nandan commented May 4, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

@adamalston this is ready for a review.
For stories i corrected the ai-label which seems to be the only one effected.
I added a todo comment on default story for an oppertunity to show it in uncontrolled state with a seperate story for controlled.

@devadula-nandan devadula-nandan requested a review from adamalston May 4, 2026 09:47
@devadula-nandan devadula-nandan mentioned this pull request May 4, 2026
Closed
6 tasks
@heloiselui heloiselui enabled auto-merge May 6, 2026 09:04
@netlify

netlify Bot commented May 6, 2026

Copy link
Copy Markdown

✅ Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit f837834
🔍 Latest deploy log https://app.netlify.com/projects/carbon-elements/deploys/69fb042e486a74000806bee1
😎 Deploy Preview https://deploy-preview-22139--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@heloiselui heloiselui added this pull request to the merge queue May 6, 2026
Merged via the queue into carbon-design-system:main with commit 3646d8a May 6, 2026
40 checks passed
@carbon-automation

carbon-automation Bot commented May 6, 2026

Copy link
Copy Markdown
Contributor

Hey there! v11.107.0 was just released that references this issue/PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@adamalston adamalston adamalston approved these changes

@heloiselui heloiselui heloiselui approved these changes

@emyarod emyarod Awaiting requested review from emyarod emyarod is a code owner automatically assigned from carbon-design-system/monorepo-reviewers

@maradwan26 maradwan26 Awaiting requested review from maradwan26 maradwan26 is a code owner automatically assigned from carbon-design-system/monorepo-reviewers

Assignees

No one assigned

Labels

status: ready to merge 🎉

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Bug]: NumberInput acts uncontrolled in a controlled setup

3 participants

@devadula-nandan @adamalston @heloiselui