[ic-select]: Return an object as the value instead of string
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
## Summary
At the moment, the value returned from the `ic-select` is a string. This ticket is to investigate if it is possible for the value returned to be an object if provided as part of the options.
## 💬 Description
At the moment, the value of the selected option is returned as a string. There is a requirement for the returned value to be an object. The object would include additional information.
```jsx
{
label: 'Foo',
value: {
type: 'bar',
}
}
```
At the moment, the value of the option is stored in a hidden input that can be retrieved when submitting a form so this may need updating.
In addition to the basic select functionality, this will need to work with `ic-select searchable`. At the moment (for both default and searchable), the value from the selected menu option is used to match the value in the options object and then display the label [getLabelFromValue](https://github.com/mi6/ic-ui-kit/blob/main/packages/web-components/src/utils/helpers.ts#L232). This may still be required for this enhancement but in addition, check for an new property (something like 'details') which can be emitted as part of `icChange`.
```jsx
{
label: 'Foo',
value: 'foo',
details: {
type: 'bar'
}
}
```
Another option is to allow:
```jsx
{
label: 'Foo',
value: {
type: 'bar',
}
}
```
..and use [getValueFromLabel](https://github.com/mi6/ic-ui-kit/blob/main/packages/web-components/src/components/ic-select/ic-select.tsx#L356) to output value object without the need to match any value property and the hidden input will have the value as the option 'label'.
It is possible to emit additional information from the custom event (i.e. `icChange`).
## 💰 Use value
Enhances the use case of `ic-select` and is a requirement from the community.
Contributor guide
Research direction
Start with packages/web-components/src/utils/helpers.ts and getLabelFromValue, then inspect packages/web-components/src/components/ic-select/ic-select.tsx and getValueFromLabel. Compare the proposed object-value and details-event approaches, including searchable mode, form submission through the hidden input, and icChange. Done requires a settled behavior and consistent handling across these cases.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100