mi6 / mi6/ic-ui-kit

Internal issue 3130 - The IcSelect component does not correctly display the selected value when the page is refreshed

Open
#4,057 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

### *Summary of the bug*

The {{IcSelect}} component does not correctly display the selected value when the page is refreshed, even though the correct value is passed via props. The dropdown shows the placeholder text instead of the selected option, and selecting the correct option again does not update the display unless another option is selected first.

### *How to reproduce*

- Navigate to a page where the {{IcSelect}} component is used.
- Ensure the component receives its value from an API call.
- Refresh the page after the data has loaded and the component has rendered.
- Observe that the dropdown displays the placeholder text instead of the selected value.
- Click the dropdown and select the correct option - notice that it does not update.
- Select a different option, then re-select the correct one - now it displays properly.

(Console logs confirm that the correct value is passed to the component on initial render and after refresh. The correct value seems to be ‘selected’, it is just not displayed and appears there is no value selected)

### *Expected behaviour*

The {{IcSelect}} component should correctly display the selected value passed via props, even after a page refresh. Selecting the same option again should update the display without requiring an intermediate selection.

### *Acceptance Criteria*

*Given* the {{IcSelect}} component receives a valid value from an API call (or passed through props)
*When* the page is refreshed and the component re-renders
*Then* the component should display the correct selected value

### *Additional info*

Using the MUI {{Autocomplete}} component on the same page works as expected - it correctly displays the selected value after multiple refreshes without issue. This suggests the issue is specific to the {{IcSelect}} .

Contributor guide

Open the contributing guide

Research direction

Start at the IcSelect component and reproduce the issue with a value supplied through props after an API call and page refresh. Compare its behavior with the MUI Autocomplete example described in the issue; done means the selected value displays after refresh and selecting it again works without an intermediate choice.

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.