how can I select multiple dropdown items with the same header value?

Question

I am using the Fluent UI React Northstar Dropdown component in my React application.
I have enabled multiple item selection, but I noticed that if there are multiple items with the same header value, only one item can be selected. Is there any specific reason for this behavior?

In the following example on CodeSandbox (link: Fluent UI Example), I am unable to select the first three items when I search for 'r' because there are multiple items with the header value 'Robert Tolbert'.

Screenshot:

Could someone please explain why only one item with the same header value can be selected in the Fluent UI React Northstar Dropdown when using multiple item selection? Is there a workaround or solution to allow selecting multiple items with the same header value?

score 0 · Accepted Answer · answered Jun 01 '23 at 20:49

You can use the itemToValue prop to provide a custom property for comparison in a multiselect. The default prop is header, which is the same for all three of your elements (hence, they are considered equivalent for comparison by default).

The Fluent UI Northstar docs on itemToValue states:

used when comparing two items in multiple selection. Default comparison is by the header prop.

If you use the id instead, you will be able to select all 3 Robert users with the same header separately provided each has a unique id (I've added an id to your third Robert item):

 <Dropdown
    multiple
    search
    items={inputItems}
    itemToValue={(item) => item.id}
    placeholder="Start typing a name"
    getA11ySelectionMessage={getA11ySelectionMessage}
    noResultsMessage="We couldn't find any matches."
    a11ySelectedItemsMessage="Press Delete or Backspace to remove"
  />

Here is a working codepen with the behavior you want:

https://codesandbox.io/s/fluent-ui-example-forked-4p7l7r

how can I select multiple dropdown items with the same header value?

1 Answers1