Altinn / Altinn/app-frontend-react

Formatting issues on MultipleSelect "alertOnChange": true

Open
#2,375 1 comment 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

If their is a lot of selections in a MulitpleSelect component and a user wants to delete all of the selections (using `"alertOnChange": true` property) the buttons accept and cancel does not appear in the pop-up windowfield.

Windowfield should resize depending on text length of the selections or have a maximum text size that is displayed e.g. "Er du sikker på at du vil slette 01 Tørkemidler, 01 Valkemidl...?"
![image](https://github.com/user-attachments/assets/e74b8e02-6504-40c2-9aa3-bc007e6f1220)
![image](https://github.com/user-attachments/assets/ee3375de-70bf-448d-af37-aa69304ae5ff)
![image](https://github.com/user-attachments/assets/d976d814-24c2-4e2e-bd9b-f4383ec2ed21)

### Steps To Reproduce

1. Add a multipleSelect component with property `"alertOnChange" : true`
2. Make an appOptions List with a lot of options.
3. Add options to multipleSelect.
4. Press on "x" (delete)

### Additional Information

In addition the button "hide selectable options" in frontend, does'nt work (applies to both multipleSelect and dropdown and the components in designSystemet).
![image](https://github.com/user-attachments/assets/2d546f51-c193-43f9-9952-860954d5acc7)

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the MultipleSelect flow with alertOnChange enabled and many selected options, then inspect the confirmation pop-up and the frontend “hide selectable options” behavior for MultipleSelect and dropdown. Done means the confirmation buttons remain usable with long selections and the hide-options button works in the reported components.

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
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.