Dropdown can not display selected element (string is fine)

[ilovepumpkin]

What package(s) are you using?

• carbon-components
• [ x] carbon-components-react

Detailed description

I am using itemToElement to show my dropdown options, but now Dropdown can not show the selected element because the line " {selectedItem ? itemToString(selectedItem) : label}" should try to invoke "itemToElement" if it is available but now only string can be displayed .

<ListBox.Field
                  id={id}
                  tabIndex="0"
                  disabled={disabled}
                  aria-disabled={disabled}
                  aria-labelledby={`${labelId} ${fieldLabelId}`}
                  aria-describedby={helperId}
                  {...buttonProps}>
                  <span
                    id={fieldLabelId}
                    className={`${prefix}--list-box__label`}
                    title={selectedItem ? itemToString(selectedItem) : label}
                    {...getLabelProps()}>
                    {selectedItem ? itemToString(selectedItem) : label}
                  </span>
                  <ListBox.MenuIcon
                    isOpen={isOpen}
                    translateWithId={translateWithId}
                  />
                </ListBox.Field>

This is my expected result

[emyarod]

related #4913 #4977 #5023 #5578

[asudoh]

Hi 👋 is your desired UX close to #2571, or something else?

[ilovepumpkin]

The design I got is a single choice dropdown, and the each option is shown like a Tag component like the screenshot I pasted above. Now I can render the dropdown options as design, but the selected item only can be shown as a string due to this bug.

[asudoh]

Thanks @ilovepumpkin - In case the design doesn't contain any confidential contents - Would you be able to post some of them here so our designers can see if it's acceptable in Carbon design ecosystem?

[ilovepumpkin]

Unfortunately what I got is only the "selected state" screenshot, no "options expanded" state screenshot. But my question is that since the options items could be an element, why the "displayed" item can not be an element, instead must be a string? I am confused.

[asudoh]

A developer in the team wants to restrict the contents in the trigger button, due to an alleged risk of our promise in a feature set broken by custom content. OTOH, I can see more flexibility there would be desirable for some use cases (despite of that risk), but I don't have a concrete use case that our designers can see it's valid. That's where my previous question came from. Does it make sense?

Update: Seems that you got that design from your designer. If so, wondering if your designer have talked to our designers on this design?

[ilovepumpkin]

I guess not, :D. I will let her know about this. Thanks!

[joshblack]

I just wanted to chime in here and clarify that the design intent is not to have custom options like tags inside of the dropdown component. Similarly, custom items should not render in the field position. The rationale for this is that it can create some confusion UX-wise around how to use the control (for example if it looks like a multi-select but doesn't behave like one)

Feel free to reach out on #carbon-design-system on Slack if there are any concerns with this!

For folks on the team, can see our recent thread on the support channel for the resolution 👍