Altinn / Altinn/app-frontend-react

Should checkboxes support true/false?

Open
#114 13 comments 2 reactions 0 assignees View on GitHub
kind/user-story ux
Dominant language
TypeScript
Stars
21
Forks
33
Avg merge
6d 23h
Merged PRs (30d)
3

Description

## Description
We had an incident with an app with several checkbox-components, each with only 1 option to check. The data model fields were all booleans, so that checking the checkbox set the value to true. App: `digdir/godkjenn-bruksvilkaar`.

However, after this change (from january 2021) https://github.com/Altinn/altinn-studio/commit/0bd246a09b82ea10c276567d43ec0970ae8e21ff#diff-df4b204405101ca09583792727c63870fcf2a486381a2575ca8eb334a33f2660, checkbox components no longer support toggling true/false. They only support toggling either options-value, or no value.

In the specific incident mentioned above, this caused problems because the underlying data model fields were not nullable booleans, and when the data model was initialized, they were automatically set to `false`. Checking the checkbox then resulted in a value `false,true`, since toggling between true/false is not supported. This results in a validation error, since `false,true` is not a boolean value.

We need to decide if toggling true/false is behaviour we would expect from a checkbox, and if so, implement support for it.

## Screenshots
![InkedFeil i bruksvilkår_app (002)_LI](https://user-images.githubusercontent.com/1636323/123430551-9bdc1780-d5c8-11eb-9f68-62a21dd2dcfe.jpg)

## Considerations
Is togglig between true/false behaviour we expect from a checkbox? Or is this better covered by f.ex. a radiobutton (Yes/No), where the user actively has to choose? Is togglig between value/no value as we do now sufficient for a checkbox?

## Acceptance criteria
> Describe criteria here (i.e. What is allowed/not allowed (negative tesing), validations, error messages and warnings etc.)

## Specification tasks

- [ ] Development tasks are defined

## Development tasks
> Add tasks here

## Test
> Add test cases here as checkboxes that are being tested as part of the changes.

## Definition of done
Verify that this issue meets [DoD](https://confluence.brreg.no/display/T3KP/Definition+of+Done#DefinitionofDone-DoD%E2%80%93utvikling) (Only for project members) before closing.

- [ ] Documentation is updated (if relevant)
- [ ] Technical documentation (docs.altinn.studio)
- [ ] User documentation (altinn.github.io/docs)
- [ ] QA
- [ ] Manual test is complete (if relevant)
- [ ] Automated test is implemented (if relevant)
- [ ] All tasks in this userstory are closed (i.e. remaining tasks are moved to other user stories or marked obsolete)

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the checkbox component implementation and the January 2021 commit linked in the issue, using the reported boolean and option-value behavior as the reproduction case. Define the expected true/false behavior and acceptance criteria before changing code, then add the relevant automated and manual tests and verify that validation no longer rejects the resulting value.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.