Label for nested property

[risalfajar]

How to use a nested object property as label?

For example, this doesn't work and shows undefined in the list:

<script>
  const complexItems = [
      {parent: {child: 'someValue'}}
  ];
</script>

<Select items={complexItems} label="parent.child"></Select>

[risalfajar]

UPDATE

Using item slot works for the dropdown items. And using selection slot works for the selected text.

But I think the best solution is for label to also accept function props. So that it can be simpler and aria can be supported.

[rob-balfre]

Glad you got it working.

Also you'll need to support filtering for nested objects... https://github.com/rob-balfre/svelte-select#exposed-methods and for a11y see https://github.com/rob-balfre/svelte-select#a11y-accessibility

Thanks

[risalfajar]

But I think the best solution is for label to also accept function props. So that it can be simpler and aria can be supported.

Would you consider this? I could create a PR

[rob-balfre]

I'm not sure it's a necessary addition, would probably just add more weight to a overpacked component. Happy to be proved wrong though :)

[risalfajar]

What we need is just one more function, let's say getLabel(item), it'll check that if label is a string, then return item[label], and if label is a function, then return label(item).

Then in every place we need to get the label, just call getLabel(item).

[kevin4dhd]

any update for this?