mi6 / mi6/ic-ui-kit

[ic-select]: Return an object as the value instead of string

Open
#571 3 comments 0 reactions 0 assignees View on GitHub
dx select component
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.