Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Not possible to use a nested property for optionLabel/optionValue/optionInfo in CpsSelect

Open
  • Is something wrong?
#387 0 comments 0 reactions 1 assignee View on GitHub

Maintainers usually reply within 1 day

@lukasmatta is already working on this.

Since May 20, 2024.

  • #625 by @lukasmatta — open

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
25/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
angular, typescript
Domain
frontend

Research direction

Start at the CpsSelect and CpsTreeSelect entry points named in the issue, then inspect the corresponding CpsAutocomplete and CpsTreeAutocomplete APIs. Done means the affected optionLabel, optionValue, and optionInfo inputs support the requested nested-property use case, with behavior verified against the existing linked pull request and relevant component tests.

Written by the indexing model from the issue text.

Description

enhancement

Currently, if one wants to use nested property for optionLabel/optionValue/optionInfo it's not possible. Let me illustrate on an example:

We have an array of options of the following type:

interface Option {
  name: string;
  address: {
    city: string;
  };
}

And we want to use it in a CpsSelect:

<cps-select
  [options]="options"
  optionLabel="address.city" <!-- currently not possible -->
>
</cps-select>

I'd suggest supporting not only string type but also a Function type for those inputs, so that a user can define custom function that will take option object and would return value to be used for optionLabel/Value/Info, e.g.:

const getCity = (option: Option): string => option.address.city;

<cps-select
  [options]="options"
  optionLabel="getCity"
>
</cps-select>

Components that might also support this:
CpsSelect/CpsTreeSelect
CpsAutocomplete/CpsTreeAutocomplete

Dominant language
TypeScript
Stars
9
Forks
7
Avg merge
11h 59m
Merged PRs (30d)
8

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from AbsaOSS/cps-shared-ui

All issues in AbsaOSS/cps-shared-ui

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.