feat(number-field): add decimalSeparator prop #596

[airikej]

Summary by CodeRabbit

• New Features

  • NumberField component now supports configurable decimal separator (comma or dot), enabling better international number input support.
  • Enhanced accessibility with improved spinbutton semantics for number fields.

• Tests

  • Expanded test coverage for decimal separator parsing, formatting, and edge cases.

[coderabbitai]

Warning

Rate limit exceeded

@airikej has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 25 minutes and 19 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 961881c8-bf2b-4815-8d29-99bd5b48d96a

📥 Commits

Reviewing files that changed from the base of the PR and between 1676aee and 8ed66cc.

📒 Files selected for processing (1)

• src/tedi/components/form/number-field/number-field.tsx

📝 Walkthrough

Walkthrough

NumberField transitions from HTML5 native numeric input to a text-based spinbutton with configurable decimal separator support. User input now accepts both comma and dot notation, which are normalized and parsed; numeric state is clamped and reflected back as a formatted display string. Test coverage expands to verify decimal-separator behavior across parsing, formatting, focus/blur synchronization, and inputMode resolution.

Changes

NumberField Decimal Separator Support

Layer / File(s)	Summary
Import Setup src/tedi/components/form/number-field/number-field.tsx	React imports consolidated to include ChangeEvent for new event handlers.
Props & Defaults src/tedi/components/form/number-field/number-field.tsx	New optional decimalSeparator?: '.' | ',' prop added to NumberFieldBreakpointProps; component defaults separator to '.' and resolves inputMode dynamically based on decimalPlaces and decimalSeparator.
Display State & Formatting Logic src/tedi/components/form/number-field/number-field.tsx	String-based displayValue state introduced; formatter helper created keyed by decimalSeparator; effect synchronizes displayValue from controlled value prop when input is not focused; resolvedInputMode derived from decimalPlaces and decimalSeparator.
Input Parsing src/tedi/components/form/number-field/number-field.tsx	handleInputChange normalizes comma/dot input, parses to float (or 0 for empty), clamps to min/max, updates numeric state, and formats display string accordingly.
Focus & Blur Handlers src/tedi/components/form/number-field/number-field.tsx	Focus state tracked; blur handler reformats display value to ensure configured decimalSeparator is applied consistently.
Button Interactions src/tedi/components/form/number-field/number-field.tsx	Increment/decrement buttons update displayValue using formatter after numeric clamping and rounding.
Input Rendering & ARIA Semantics src/tedi/components/form/number-field/number-field.tsx	Input transitions to text-based spinbutton: changes type from "number" to "text", adds role="spinbutton" and aria-valuemin/valuemax/valuenow, removes native min/max/step props, binds value to displayValue instead of numeric value, sets inputMode={resolvedInputMode}, and wires focus/blur handlers.
Test Coverage src/tedi/components/form/number-field/number-field.spec.tsx	Boundary assertions updated to expect string values; new tests verify comma decimal parsing (1,5 → 1.5), partial entries (- does not trigger onChange), input clearing (calls onChange with 0), display formatting by decimalSeparator, blur reformatting, and inputMode="decimal" when separator is comma.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

• [NumberField]: NumberField fails to handle localized decimal separators on mobile browsers with Estonian locale #596: Implements the same controlled text-input, comma/dot parsing, configurable decimalSeparator, and resolved inputMode logic that directly addresses localized decimal handling in NumberField.

🚥 Pre-merge checks | ✅ 5

✅ 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 specifically summarizes the main change: adding a decimalSeparator prop to the number-field component, which aligns with both the code changes and the PR's objective to handle localized decimal separators.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/596-numberfield-numberfield-fails-to-handle-localized-decimal-separators-on-mobile-browsers-with-estonian-locale

---

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

[codecov]

Codecov Report

❌ Patch coverage is 92.00000% with 2 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...tedi/components/form/number-field/number-field.tsx	92.00%	2 Missing ⚠️

📢 Thoughts on this report? Let us know!

[airikej]

@coderabbitai review

[coderabbitai]

✅ 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]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/tedi/components/form/number-field/number-field.tsx`:
- Around line 189-200: handleInputChange currently normalizes and parses the
typed value then only applies forceToLimits before calling
onChange/setInputInnerValue, which diverges from handleButtonClick that also
applies roundValue; update handleInputChange to apply roundValue after
forceToLimits (using the same roundValue function) so values respect
decimalPlaces before calling onChange and setInputInnerValue (keep using
forceToLimits then roundValue in that order and reference handleButtonClick,
roundValue, forceToLimits, setInputInnerValue, and onChange when making the
change).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 51496411-be3b-44dc-93a9-485cc53e43e1

📥 Commits

Reviewing files that changed from the base of the PR and between 146e1ed and 1676aee.

📒 Files selected for processing (2)

• src/tedi/components/form/number-field/number-field.spec.tsx
• src/tedi/components/form/number-field/number-field.tsx