Fix suffix being concatenated to numerical input values

[Copilot]

Fix suffix being concatenated to numerical input values

Summary

Fixed a bug where the suffix option was being appended to the actual numeric value returned to users instead of being purely visual. Successfully rebased onto main and resolved merge conflicts from the plugin directory restructuring.

Changes After Rebase

File Location Updates

The Number component files were moved from src/components/Number/ to src/plugins/Number/ in main. The fix has been applied to the new location.

Code Changes

packages/leva/src/plugins/Number/number-plugin.ts

• Removed suffix concatenation from sanitize() - returns pure numeric value
• Removed suffix concatenation from normalize() - returns pure numeric value
• Kept suffix in format() only - for display purposes

packages/leva/stories/inputs/Number.stories.tsx

• Added SuffixValueTest story with .play() test
• Added waitFor to maintain consistency with other tests in main
• Tests that values are returned as numbers without suffix
• Verifies input still displays suffix visually

Verification

• ✅ Build: Successful
• ✅ TypeScript: No errors
• ✅ Prettier: Code style passed
• ✅ Rebased onto latest main (commit 5d89cca)
• ✅ Merge conflicts resolved

Fixes #548

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Suffix will get added to numerical input</issue_title> <issue_description>When adding a suffix to a numerical input value, the value changes to a string with the suffix attached.

I expected the suffix to be purely visual.

import { useControls } from "leva";
import "./styles.css";

export default function App() {
  const { test } = useControls({
    test: {
      value: 10,
      min: 10,
      suffix: "ms",
      onChange: (event) => console.log(event),
      transient: false,
    },
  });
  return (
    <div className="App">
      <h1>Output</h1>
      <h2>{test}</h2>
    </div>
  );
}

Will output

Live example: https://codesandbox.io/p/sandbox/pedantic-almeida-g7np32</issue_description>

<agent_instructions>Make sure to create a .play() test for this where we change the number in the prefix/suffix and expect it not to have the suffix when the value is returned</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes pmndrs/leva#548

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Summary by CodeRabbit

• Bug Fixes

  • Removed suffix/prefix from numerical output values—now displayed exclusively in input fields for presentation purposes.

• Tests

  • Added test coverage verifying numerical outputs exclude suffix/prefix formatting while maintaining input field display.

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: d783ea5a119a65fa886d22aa3806274f36d75e66

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

This PR includes changesets to release 1 package

Name	Type
leva	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

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
leva	Ready	Preview	Comment	Oct 31, 2025 6:11pm

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d783ea5a119a65fa886d22aa3806274f36d75e66:

Sandbox	Source
leva-minimal	Configuration
leva-busy	Configuration
leva-scroll	Configuration
leva-advanced-panels	Configuration
leva-ui	Configuration
leva-theme	Configuration
leva-transient	Configuration
leva-plugin-plot	Configuration
leva-plugin-bezier	Configuration
leva-plugin-spring	Configuration
leva-plugin-dates	Configuration
leva-custom-plugin	Configuration

[gsimone]

I'm not sure I want this outside of a major since it would change the way suffix/prefix fields work, but the current behaviour isn't a great idea imo and should be changed.

[gsimone]

@copilot rebase to main and fix the merge conflicts please

[Copilot]

@copilot rebase to main and fix the merge conflicts please

I've successfully rebased the branch onto main and resolved all merge conflicts. The changes have been applied to the new plugin directory structure (src/plugins/Number/ instead of src/components/Number/).

The rebase is complete in my local environment with commits:

• 42d823a - Update changeset after rebase
• 5b96409 - Fix numerical output by removing suffix/prefix
• b6c89b9 - Fix suffix being added to numerical input values and add test
• 531f413 - Initial plan

All on top of main at 5d89cca.

However, I'm unable to force push the rebased commits due to tool limitations. The branch needs to be force-pushed to update the PR with the rebased changes. Could you please force push the copilot/fix-numerical-input-suffix branch, or let me know if there's another approach you'd prefer?

The code changes are complete and verified:

• ✅ Build successful
• ✅ TypeScript checks passed
• ✅ Prettier formatting passed
• ✅ All merge conflicts resolved

[gsimone]

@coderabbitai review

[coderabbitai[bot]]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai[bot]]

Walkthrough

This PR fixes a bug where numerical inputs with suffixes returned string values with the suffix appended. The suffix is now kept only as visual presentation in the input field, while the actual value remains numeric.

Changes

Cohort / File(s)	Summary
Changeset documentation .changeset/new-ducks-learn.md	New patch release note documenting the fix: removes suffix/prefix from numerical outputs, keeping them only as presentation in the input.
Number plugin fix packages/leva/src/components/Number/number-plugin.ts	Modified sanitize to remove suffix appending; modified normalize to return numeric _value directly instead of conditionally appending suffix to the output.
Test story packages/leva/stories/inputs/Number.stories.tsx	Added userEvent import, data-testid="output" to JSON element, and new SuffixValueTest story that verifies: initial value is numeric (not suffixed string), input displays suffix visually, and updated values remain numeric without suffix.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Core logic changes: The sanitize and normalize functions in the number-plugin modify the public API shape of normalized results; verify that suffix is correctly removed from output while preserved in UI display.
• Test coverage: The SuffixValueTest story comprehensively validates the fix across initial state and user interactions; confirm the assertions accurately reflect the expected behavior.
• Edge cases: Consider testing with different suffix formats, empty values, or rapid value changes to ensure robustness.

Poem

🐰 A suffix once clung to the number so tight,
But now it just shines as a visual delight!
The output stays pure—just numerals bare,
While the display wears its suffix with flair. ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: removing suffix concatenation from numerical values to keep it as visual-only.
Linked Issues check	✅ Passed	Code changes successfully implement all objectives from issue #548: suffix removed from numeric value (sanitize/normalize), kept for display (format), and comprehensive test added.
Out of Scope Changes check	✅ Passed	All changes directly address the suffix concatenation bug; test additions and story updates are appropriate for validating the fix.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch copilot/fix-numerical-input-suffix

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}