useMultipleSelection hook not working with groups

[markosrb89]

• downshift version: 5.4.6

Relevant code or config

CodeSandbox example: https://codesandbox.io/s/multiple-selection-hook-downshift-2mu7t?file=/src/Multidropdown.jsx

What you did:

Tried to create multi dropdown component using useSelect and useMultipleSelection hooks by passing items sorted in groups.

Structure of the passed data:

[
  {
     type: "GROUP",
     title: "South America",
     options: [
       {
          disabled: false
          label: "São Paulo"
          value: "GRU"
        },
       .......
     ]
  },
  {
     title: "Australia",
     type: "GROUP",
     options: [
        {
           disabled: false
           label: "Melbourne"
           value: "MEL"
        },
      ......
    ]
  }
]

Problem description:

When option is selected, selectedItems, provided by useMultipleSelection hook, will have some random group and not the selected option. Also, selectedItem, provided by useSelect hook will be an object with some random group too.

Reproduction repository:

This issue is reproduced in the codeSandbox example mentioned above.

[silviuaavram]

As far as I can see, you probably need to pass a indexStart to DropdownOptions component in order to tell it from where to start numbering the index it is going to pass to useSelect. In index: index + 0, that 0 should be the indexStart.

Also you have items as objects, please use itemToString as suggested in the documentation, for both useSelect and useMultipleSelection. https://www.downshift-js.com/use-select#materialui https://github.com/downshift-js/downshift/tree/master/src/hooks/useMultipleSelection#itemtostring

Let us know how it goes after this.

[markosrb89]

Thank you for your time.
I fixed the issue, I just needed to send the flatten items to useSelect hook.

[silviuaavram]

Awesome! Thanks for the feedback!