mi6 / mi6/ic-ui-kit

ic-select internal currValue should be recomputed when options prop changes

Open
#4,081 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 internal `currValue` field, which `render` uses to display the label of the current selection or the placeholder, has a data-dependence on the `value` and `options` props, but is only recomputed when `value` changes.

### 🪜 How to reproduce
Tell us the steps to reproduce the problem:
1. Create a HTML file with the following markup `` and which includes JS to make the `defineCustomElements()` call
2. Add the following Javascript

```
document.addEventListener("DOMContentLoaded", () => {
const selectedValue = "validValue";
document.querySelector("ic-select").value = selectedValue;

setTimeout(() => {
document.querySelector("ic-select").options = [{label: "The valid value", value: selectedValue}];
document.body.appendChild(document.createTextNode("The options have now been updated");
}, 5 * 1000);
});

```
3. View the page, and wait for the timeout to expire
4. Observe that the `ic-select` continues to display the placeholder text. Observe that if you switch the order of initializing the options/value then `ic-select` no longer renders the placeholder text when the timeout expires

### 🧐 Expected behaviour

The currLabel [computation](https://github.com/mi6/ic-ui-kit/blob/bb9e3a395b36246edc264275d59ef2ad2e146364/packages/web-components/src/components/ic-select/ic-select.tsx#L286) (also run on `componentDidLoad`) delegates to `getLabelFromValue` which [checks](https://github.com/mi6/ic-ui-kit/blob/bb9e3a395b36246edc264275d59ef2ad2e146364/packages/web-components/src/utils/helpers.ts#L324) that the value prop is one of the current options, introducing a data-dependence on both props. Therefore it should be recomputed when `options` changes as well as `value`.

Contributor guide

Open the contributing guide

Research direction

Start with packages/web-components/src/components/ic-select/ic-select.tsx, especially the currLabel computation and componentDidLoad references in the issue. Read packages/web-components/src/utils/helpers.ts at getLabelFromValue to confirm the dependency on options. Done means ic-select updates its displayed label or placeholder when options changes after value, with the behavior covered by the relevant component test if one exists.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.