Dropdown value is [object Object] when selecting an item that is an object using DropdownItemProps #2336
Description
Bug Report
If you provide an object for the items
prop on Dropdown
(fitting the DropdownItemProps interferace) and a defaultValue
the Dropdown seems to break and not show content
.
Steps
Create Dropdown items that might look like this:
const inputItems = [
{
key: "BruceW",
content: "Bruce Wayne",
active: false
},
{
key: "Natasha",
content: "Natasha Romanoff"
},
{
key: "Steven",
content: "Steven Strange"
}
];
const DropdownExample = () => (
<Dropdown
items={inputItems}
defaultValue={inputItems[1]}
getA11ySelectionMessage={{
onAdd: item => `${item} has been selected.`
}}
/>
);
Here I need to create objects for these items, because I need to pass in the active
property for some of my items.
I passed in a defaultValue which is the second item in my items array. But when I do this, I get this result:
So instead I changed the Dropdown to this:
const DropdownExample = () => (
<Dropdown
items={inputItems}
defaultValue={inputItems[1].content}
getA11ySelectionMessage={{
onAdd: item => `${item} has been selected.`
}}
/>
);
Which does give me a correct initial render:
But after selecting another item in this dropdown, I get back to a broken "[object Object]" state:
Expected Result
The expected result would be that defaultValue
should render the content
on the DropdownItemProps, as well as when selecting other values Dropdown
should render the content
property as well.
Actual Result
The defaultValue
renders "[object Object]" and even if you explicitly pass the content
prop, it breaks when selecting another value.
Version
0.44.0