Downshift: section/optgroup example

[techniq]

• downshift version: 1.3.0

I was wondering if you've tried to implement an example of item sections (i.e. optgroup)?

This has been a highly requested feature for react-select and resulted in a separate fork. I saw issue #53 regarding implementing react-autosuggest's API which it also supports multiple sections.

[kentcdodds]

Hi! Thanks for the issue/idea! Do you have a demo of this feature? I'm not sure I follow.

[kentcdodds]

Just looked at a demo elsewhere and this is dead simple with downshift.

Why don't you start trying here: http://kcd.im/ds-example
Then ping us in here if you have any trouble. This would be a great example for the README!

[techniq]

I guess my confusion was how to have some elements rendered within the menu be excluded from selection (keyboard navigation, onClick, etc). Looking closer at it, I guess by not adding {...getItemProps({...})) to those elements makes them "inert" (for lack of a better word).

I guess the main thing will be determining which group headers to include based on the filtering applied to the elements. Should just be a simple reduce...

[kentcdodds]

Yes to all the things you said :)

I look forward to seeing what you come up with!

[techniq]

I used react-autosuggest's multiple sections example as a basis, but here is a working example: https://codesandbox.io/s/zx1kj58npl

The main work (as you'd expect) is here:

<Menu>
  {items.reduce((result, section, sectionIndex) => {
    result.sections.push(
      <Section key={sectionIndex}> 
        <SectionTitle>
          {section.title}
        </SectionTitle>
        {section.languages.map((language, languageIndex) => {
          const index = result.itemIndex++;
          return (
            <Item
              key={languageIndex}
              {...getItemProps({
                item: language,
                index: index,
                isActive: highlightedIndex === index,
                isSelected: selectedItem === language
              })}
            >
              {itemToString(language)}
            </Item>
          )
        })}
      </Section>
    )

    return result;
  }, { sections: [], itemIndex: 0}).sections}
</Menu>}

I couldn't come up with a better way to create the item indexes across sections but going the reduce route works. I tried initially to derive them a combination of sectionIndex and languageIndex (aka itemIndex) but nothing came to mind that would keep them sequential.

Anyways, if I find some more time I might try to clean this up a bit, but it's probably good enough in it's current state to show as an example.

[kentcdodds]

That's awesome! Could you make a PR to add it to the examples list in the README? This is very cool :+1:

[techniq]

Done: https://github.com/paypal/downshift/pull/168

[dimadetrix]

@techniq Perfect solution !! I have a little bit another data structure... but looking into your code i wrote something similar to your example, and it works as expected, You saved my time :)

[j3tchy]

Is it possible to use grouped options with the useCombobox hook?

I've tried here: https://codesandbox.io/s/grouped-options-downshiftjs-usecombobox-bug-bof7b?file=/src/App.js but when I click on an item, the inputValue returns undefined.

I've also realised if look at the object within the onStateChange method, sometimes the selectedItem comes back undefined.