Does the Dropdown component's value prop serve any purpose when the component has the multiselect prop set to true?

[nathaniellee]

Hi!

I'm putting together a controlled Dropdown component that looks something like this.

<Dropdown
  button={<span>{commaDelimitedListOfSelectedOptionValues}</span>}
  multiselect
  onOptionSelect={doSomething}
  selectedOptions={selectedOptions}
  value={value}
>
  // map across an array of key-value pairs where the value represents a human-readable text string
  <Option key={key} value={key}>{value}</Option>
</Dropdown>

I have a handler that pulls the optionValue and selectedOptions values when the user selects an option and then joins the human-readable text string values from those selected options together to construct the string that will be shown on the button. I noticed that the value prop seems to be just a single option's value, so I'm wondering whether I need to even pass it back into the Dropdown component as it doesn't seem to actually do anything?

Is there a purpose to having the value prop on the Dropdown component in this situation?

Thanks for any insight/context! :)

[smhigley]

Essentially, in this particular code example, no.

The value prop on Dropdown will control the text that is displayed in the trigger button (unless you override this by passing in your own trigger button children with the button slot). It will default to showing the text of the selected options (comma-delimited for multiselect), but if you control the selectedOptions prop you'd also need to pass in either an explicit value prop or customize the button slot so it's correct on the initial render before being opened. The reason for that is that Options are not rendered before the Dropdown is first focused & opened, so it doesn't have access to the initial selected option data to calculate the value string.

TL:DR; it looks like you're customizing the button slot directly, which means there's no need to also pass in the value 😊.