Skip to content

[NumberField]: NumberField fails to handle localized decimal separators on mobile browsers with Estonian locale #596

@Kaarelmm

Description

@Kaarelmm

Problem

NumberField does not handle localized decimal separators correctly on mobile. On iOS with Estonian locale, the decimal keyboard provides , instead of ., and the current native type="number" input does not persist that value as expected. This makes decimal entry unreliable on iOS browsers and potentially inconsistent on Android browsers as well.

Solution

Update NumberField so decimal input is parsed in component logic instead of relying on native type="number" behavior.
Implemented approach:
• Replace native number parsing with controlled text input handling
• Accept both . and , as decimal separators
• Normalize , to .
• Preserve intermediate typing states such as 1, and 1.
• Allow consumers to explicitly use inputMode="decimal" when they want a decimal keyboard on mobile
This keeps existing API behavior stable while fixing localized decimal entry where the keyboard provides a comma

Examples and information

Project

DoD

  • The component is developed using best practices, conventions, and modern frontend trends
  • The component follows BEM naming conventions (if applicable)
  • The component implementation matches the Figma design, including all defined states and interactions
  • The component supports responsiveness and scales across breakpoints (if applicable)
  • The component does not introduce runtime errors or warnings
  • Linter passes
  • Component has export if needed
  • The component has unit tests with at least 80% code coverage
  • CodeCov passes minimum coverage threshold
  • The component has passed code review
  • The component has passed Chromatic visual review
  • Storybook stories are created:
    • Cover all Figma variations
    • Include edge cases, empty/error states
  • Component’s API (props, slots, events) is documented
  • ZeroHeight is updated with design/development guidelines
  • External dependencies used in the component are documented in Confluence with rationale.
  • Semantic commit format is used (for semantic-release)
  • External libraries comply with validated open source licenses
  • Component is versioned correctly and ready for release if required
  • Update statuses page in Zeroheight

Metadata

Metadata

Assignees

Labels

tedi-readyTEDI-Ready component issue

Type

No type
No fields configured for issues without a type.

Projects

Status

Code review

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions