Altinn / Altinn/app-frontend-react

Characters from formatting count towards maxLength for Input fields

Open
#4,312 1 comment 0 reactions 0 assignees View on GitHub
kind/bug status/triage
Dominant language
TypeScript
Stars
21
Forks
33
Avg merge
6d 23h
Merged PRs (30d)
3

Description

### Description of the bug

Characters from formatting count towards maxLength for Input fields, this causes the count of remaining symbols to be incorrect. The following image shows an input field that should say "Du har 7 tegn igjen", it shows 0 due to formatting inserting spaces for numbers, and two punctuations.

Image

Additionally formatting characters count towards the maxlength without accounting for characters consumed by formatting, adjusting to account for maximum length causes maxLength to initially be too large.

Image

Correct behaviour would be to store input to formatted number separately from visual formatting, read maxLength from input while applying format visually.

### Steps To Reproduce

1. Make blank page in altinn studio
2. Use input field with both formatting and maxLength

### Additional Information

Code for field shown:

{
"id": "S08-Input-Kontonummer",
"type": "Input",
"textResourceBindings": {
"title": "S08-Input-Kontonummer.Title",
"description": "S08-Input-Kontonummer.Description"
},
"dataModelBindings": {
"simpleBinding": {
"field": "FlatData.Kontonummer",
"dataType": "DataModel"
}
},
"formatting": {
"number": {
"format": "####.##.#####",
"allowLeadingZeros": true
}
},
"required": true,
"maxLength": 13
},

Contributor guide

Open the contributing guide

Research direction

Start at the Input field's formatting and maxLength handling, using the provided S08-Input-Kontonummer configuration as the reproduction case. Create a blank Altinn Studio page with number formatting and maxLength enabled, then verify that remaining-character counts and the maximum accepted unformatted input exclude visual formatting characters.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.