carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.88k stars 1.82k forks source link

[Bug]: Dropdown doesn't render items to element if they're backed by string (not object) #18183

Open kubijo opened 3 days ago

kubijo commented 3 days ago

Package

@carbon/react

Browser

Edge, Firefox, Safari, Chrome

Package version

1.70.0

React version

18.3.1

Description

There are three props that control how items are rendered in dropdown instances:

However, the itemToElement callback is useless when you supply items as strings.

The relevant code is here: https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Dropdown/Dropdown.tsx#L694

Please do not cancel this on the grounds of not having a reproduction link... the code itself shows abundantly clearly that what I say is true.

To me, this is clearly a bug because itemToElement is for presentation purposes only and conditioning its usage based on data type does not make sense.

Note that I am not on latest @carbon/react because of a regression you have there.

Reproduction/example

Steps to reproduce

function itemToElement(x) {
    return <strong style={{ color: 'red' }} children={x} />;
}

<Dropdown<string>
    titleText="title"
    items={['a', 'b', 'c', 'd']}
    selectedItem="a"
    onChange={console.log.bind(console)}
    itemToElement={itemToElement}
    renderSelectedItem={itemToElement}
/>

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

kubijo commented 3 days ago

Reagarding the workaround ... I've created a wrapper component that wraps the items into object and then wraps the callbacks too to make it transparent...