Dropdown value is [object Object] when selecting an item that is an object using DropdownItemProps about fluent-ui-react

[jugglingcats]

Have same issue. Would love to know if it's a bug or user error on my part.

[jugglingcats]

I managed to find a workaround (for my use case anyway) by supplying itemToString. My code:

export const FrameSelector = () => {
    const items = [
        <div key="item1" placeholder="Item 1" style={{marginLeft: "10px"}}>Item 1</div>,
        "Item 2"
    ];

    function itemToString(value) {
        const placeholder = value && value.props && value.props.placeholder;
        return placeholder || "PLACEHOLDER NOT PROVIDED";
    }

    return <Dropdown itemToString={itemToString} items={items}/>
};

My goal is simply to indent some items to make the dropdown look tree-like. I don't know if the above is best practice but it serves my purpose.

I realise re-reading the OP issue that mine is not quite the same, since my content is an element with style, but it may still be a solution to the original issue.

However, I notice that my solution does not correctly select the default value, if given:

    return <Dropdown itemToString={itemToString} items={items} defaultValue="Item 1"/>

This correctly displays "Item 1" in the trigger button but when dropdown is opened the second item is highlighted not the first.

[KyleBastien]

@jugglingcats Thanks for the tip on itemToString, that got me closer (sort of..) and I ended up with this:

https://codesandbox.io/s/fluent-ui-example-wo34b

The issue I'm running into now is that the active property doesn't seem to be respected, and I'm able to select items even if it's set to active: false.