ic-select internal currValue should be recomputed when options prop changes
- 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
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