Altinn / Altinn/app-frontend-react

Jump to repeating field with error when using stickyHeader

Open
#2,139 0 comments 0 reactions 0 assignees View on GitHub
kind/bug
Dominant language
TypeScript
Stars
21
Forks
33
Avg merge
6d 23h
Merged PRs (30d)
3

Description

### Description of the bug

When I press a validation message for a field in a "RepeatingGroup", it jumps to the field where the error is. The problem is that the page only jumps up so far that the field with errors is hidden behind the header row. It is confusing because you don't see where the error is (without pressing the tab-button or something like that). See gif.

### Steps To Reproduce

1. Create a repeating group with a lot of rows (20 should be enough)
2. Let the fields in the group be required
3. Use the option "stickyHeader" to freeze the top row
4. Validate the page
5. Click the topmost message in the error-panel (at the bottom of the page)
![BugStickyHeader](https://github.com/Altinn/app-frontend-react/assets/42466346/d691f05c-95e3-45d9-ad03-7dc2acb70791)

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue with a RepeatingGroup containing about 20 required rows, the stickyHeader option enabled, and validation errors shown in the error panel. Trace the jump from the topmost validation message to its field; done means the field is visible below the frozen header after navigation.

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
Stale
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.