Skip to content

fix(numberinput): update onChange value type to Number for type="text"#19742

Merged
kennylam merged 5 commits into
carbon-design-system:mainfrom
tay1orjones:numberinput-improvements
Jun 26, 2025
Merged

fix(numberinput): update onChange value type to Number for type="text"#19742
kennylam merged 5 commits into
carbon-design-system:mainfrom
tay1orjones:numberinput-improvements

Conversation

@tay1orjones

@tay1orjones tay1orjones commented Jun 23, 2025

Copy link
Copy Markdown
Member

Closes #19630

Based on user feedback, this updates the NumberInput API and logic when type="text" in the following ways:

Changelog

New

  • Add onBlur to NumberInput API

Changed

  • Update defaultValue to default to 0 for type="number" and NaN for type="text"
  • Harden existing logic to guard against NaN values
  • Update the event value in onChange to be a Number, not the locale-formatted string
  • Ensure onBlur is called when the input is blurred, and also when stepper buttons are blurred
  • Change stepper logic for when the input is empty:
    • incrementing always starts at min
    • decrementing always starts at max
    • If no min or max it starts at 0
  • Storybook docs for the stepper logic
  • Added/updated tests

Testing / Reviewing

  • View the "with type of text ..." stories and ensure the above items work as intended
  • The "controlled" example story and helper functions gives you a way to test the functionality is consistent when using value over defaultValue
  • The stories log out event loop values in the console so you can verify their type in addition to their value

Warning

"Controlled" story and associated story helper/logging functions need to be removed before merge

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

@tay1orjones tay1orjones requested a review from a team as a code owner June 23, 2025 20:59
@tay1orjones tay1orjones requested a review from a team June 23, 2025 20:59
@tay1orjones tay1orjones requested a review from a team as a code owner June 23, 2025 20:59
@netlify

netlify Bot commented Jun 23, 2025

Copy link
Copy Markdown

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

Name Link
🔨 Latest commit 016929e
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/6859c042717bf2000821af2e
😎 Deploy Preview https://deploy-preview-19742--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@netlify

netlify Bot commented Jun 23, 2025

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-react ready!

Name Link
🔨 Latest commit 016929e
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/6859c042a160d10008cc369f
😎 Deploy Preview https://deploy-preview-19742--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@netlify

netlify Bot commented Jun 23, 2025 •
edited
Loading

Copy link
Copy Markdown

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

Name Link
🔨 Latest commit 758f747
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/685d3f1fc04a37000999a028
😎 Deploy Preview https://deploy-preview-19742--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@netlify

netlify Bot commented Jun 23, 2025 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 758f747
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/685d3f1f0dcd4100084174c5
😎 Deploy Preview https://deploy-preview-19742--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@codecov

codecov Bot commented Jun 23, 2025 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.78%. Comparing base (34dfc74) to head (758f747).
Report is 5 commits behind head on main.

Additional details and impacted files 
@@            Coverage Diff             @@
##             main   #19742      +/-   ##
==========================================
+ Coverage   84.73%   84.78%   +0.05%     
==========================================
  Files         369      369              
  Lines       14678    14700      +22     
  Branches     4838     4852      +14     
==========================================
+ Hits        12437    12464      +27     
+ Misses       2092     2087       -5     
  Partials      149      149

☔ 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.

maradwan26
maradwan26 approved these changes Jun 25, 2025
View reviewed changes

@maradwan26 maradwan26 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.

Works as intended, LGTM !

@kennylam kennylam enabled auto-merge June 26, 2025 12:37
@kennylam kennylam added this pull request to the merge queue Jun 26, 2025
Merged via the queue into carbon-design-system:main with commit 67aed3f Jun 26, 2025
40 of 41 checks passed
@2nikhiltom 2nikhiltom mentioned this pull request Jul 7, 2025
Closed
1 task
heloiselui pushed a commit to guidari/carbon that referenced this pull request Jul 11, 2025
@tay1orjones @kennylam @heloiselui
fix(numberinput): update onChange value type to Number for type="text" (
25e3e27 
carbon-design-system#19742)

* fix(numberinput): update onChange value type to Number, ensure onBlur is called for steppers

* fix(numberinput): ensure event loop is properly updated for type=text

* docs(numberinput): new stepper logic

---------

Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>
@tay1orjones tay1orjones mentioned this pull request Aug 4, 2025
Closed
2 tasks
@devadula-nandan devadula-nandan mentioned this pull request Mar 4, 2026
Merged
5 tasks
AlexanderMelox pushed a commit to AlexanderMelox/carbon that referenced this pull request Apr 28, 2026
@tay1orjones @kennylam @AlexanderMelox
fix(numberinput): update onChange value type to Number for type="text" (
c5ddba1 
carbon-design-system#19742)

* fix(numberinput): update onChange value type to Number, ensure onBlur is called for steppers

* fix(numberinput): ensure event loop is properly updated for type=text

* docs(numberinput): new stepper logic

---------

Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@kennylam kennylam kennylam approved these changes

@maradwan26 maradwan26 maradwan26 approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Feature Request]: NumberInput type="text" functional improvements

3 participants

@tay1orjones @kennylam @maradwan26