Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dropdown component doesn't support component label. #4913

Closed
Kimi1020 opened this issue Dec 18, 2019 · 2 comments · Fixed by #4977
Closed

Dropdown component doesn't support component label. #4913

Kimi1020 opened this issue Dec 18, 2019 · 2 comments · Fixed by #4977

Comments

@Kimi1020
Copy link

Kimi1020 commented Dec 18, 2019

Title line template: [Title]: Brief description

I want to show the component label after selecting a component option for dropdown.

What package(s) are you using?

carbon-components-react

Detailed description

Describe in detail the issue you're having. Is this a feature request (new
component, new icon), a bug, or a general issue?

Is this issue related to a specific component?
Yes, carbon/packages/react/src/components/Dropdown/Dropdown.js

What did you expect to happen? What happened instead? What would you like to
see changed?
For dropdown component, if I use itemsToElement to make option an component, after select it, it will show itemToString function's result. I think it should show the component as well.

After I checked the source code of Dropdown.js, I found below code. It use itemToString function to render the label. In my circumstance, I want to use itemToElement to render the label. Shall we support it for this dropdown component?

{selectedItem ? itemToString(selectedItem) : label}
Source: carbon/packages/react/src/components/Dropdown/Dropdown.js

What browser are you working in?
chrome v79
What version of the Carbon Design System are you using?
carbon-components-react": "^7.7.3"

@Kimi1020
Copy link
Author

If I set itemToString={itemToElement}, below key={itemToString(item)} will report object key warning.
<ListBox.MenuItem key={itemToString(item)} isActive={selectedItem === item} isHighlighted={ highlightedIndex === index || selectedItem === item } {...getItemProps({ item, index })}> {itemToElement ? ( <ItemToElement key={itemToString(item)} {...item} /> ) : ( itemToString(item) )} </ListBox.MenuItem>

@jendowns
Copy link
Contributor

jendowns commented Jan 8, 2020

I can help with this 👍 PR coming shortly

UPDATE: PR is here #4977

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants