Dropdown renders selected item incorrectly when content slot is given in DropdownItem

spjtls9 commented 4 years ago

Environment Information

Package version(s): 0.51.0
Browser and OS versions: Repro on both Mac and Windows

Please provide a reproduction of the bug in a codepen:

https://codesandbox.io/s/gifted-field-4mpb4?file=/example.js

Actual behavior:

When Dropdown input is given in this format:

 const inputItems = [
    { content: <div>'Bruce Wayne'</div>},
    { content: <div> 'Natasha Romanoff'</div>}
]

The popper renders contents as expected, but when selected, the dropdown shows [Object object]

Expected behavior:

Dropdown should show the identical content of the selected dropdown item, not [Object object]

Priorities and help requested:

Are you willing to submit a PR to fix? - Yes

Requested priority: Normal

paulgildea commented 4 years ago

@spjtls9 Thanks for the feedback.

miroslavstastny commented 4 years ago

@spjtls9 - this is currently unsupported scenario. If you need to customize the rendered tree for the items, you can use renderItem and renderSelectedItem props on Dropdown as shown in this example.

edwardmcleodjones commented 4 years ago

renderSelectedItem only works with the multiple prop though. Is it possible to customize the render for the selected item when in single item mode instead?

See: https://codesandbox.io/s/priceless-bird-rh3zv?file=/example.js

okel17 commented 4 years ago

Hi @miroslavstastny ,

Can we please consider reopening this based on @edwardmcleodjones comment and codepen? We are also facing the same issue.

miroslavstastny commented 4 years ago

@edwardmcleodjones - the problem is that depending on the props, Dropdown renders different components for selected item.

<Dropdown multiple /> renders DropdownSelectedItems which can be customized using renderSelectedItem.

<Dropdown /> renders a trigger button which can be customized using triggerButton prop on Dropdown:

<Dropdown
placeholder="Start typing a name"

triggerButton={{
children: (Item, props) => {
  console.log('triggerButton', props)
  if (props.content !== 'Start typing a name') {
    // Problem: no reliable way to recognise the placeholder
    props.content = `${props.content} (customContent)`
  }
  return <Item {...props} />
}
}}
/>

<Dropdown search /> renders a search input which can be customized using searchInput prop on Dropdown:

<Dropdown
multiple
search

searchInput={{
children: (Item, props) => {
  console.log('searchInput', props)
  if (props.accessibilityInputProps.value) {
    // Problem: modifying a value breaks inline editing
    props.accessibilityInputProps.value = `${props.accessibilityInputProps.value} (custom searchInput)`
  }
  return (
    <Item
      {...props}
    />
  )
},
}}
/>

Also <Dropdown multiple /> renders, after the selected items, either the triggerButton or the searchInput depending on the search prop.

This is definitely neither straightforward nor simple but you can technically customize anything.

@edwardmcleodjones @okel17 - Could you please share a design or behaviour you are trying to implement so that we can verify that it is doable?

FYI @jurokapsiar

edwardmcleodjones commented 4 years ago

@miroslavstastny Thanks for those examples. I can sort of achieve what I'm after with the second example you provided, of customizing the props.accessibilityInputProps.value in the searchInput to match the selected items's value, see:

https://codesandbox.io/s/jovial-pond-vev3s?file=/example.tsx

You can see that selecting an item using the dropdown does successfully then use the title property of the selected item object.

However, that then seems to break the search capability, not sure if that's related to the // Problem: modifying a value breaks inline editing comment? As you say it doesn't seem to be a particularly straightforward approach.

Why can't a <Dropdown /> without the multiple prop still just render a single DropdownSelectedItem?

Could you please share a design or behaviour you are trying to implement

Basically would just like a simple way to have a <Dropdown /> in single mode be able to render a selected item that is an object (as opposed to a simple string) by supplying a custom render function, similar to renderSelectedItem.

edwardmcleodjones commented 4 years ago

Customising the triggerButton (as shown in your first example) works pretty well in a non search and non multiple enabled <Dropdown />, see:

https://codesandbox.io/s/vigorous-ptolemy-ofr94?file=/example.tsx

microsoft / fluentui