Downshift: selectItemAtIndex possible regression

[the-simian]

• Downshift: 1.0.0-beta-21
• node version: 8.2.1
• yarn 0.27.5

Relevant code or config

• working example: https://codesandbox.io/s/QMGq4kAY

Before I explain the issue, heres the chunk of code to look for in the demo to be able to reproduce the issue. (around line 131 of the material-combobox.js file)

        const _props = getItemProps({
          value: item,
          index,
          "data-highlighted": highlightedIndex === index,
          "data-selected": selected,

          //This is the important event.
          onClick: () => {
            //selectItemAtIndex(index) //does not work
            selectItem(item); //works    
            //console.log('highlightedIndex', highlightedIndex)
            //selectHighlightedItem() //does not work.
          }
        });

Howdy! :) When I upgraded to 1.0.0-beta.21 from 1.0.0-beta.14, some issues such as the clearing of the autocomplete seem totally resolved and just about everything seems to be working well; however, I think two functions that are means to select items might have regressed (as they dont seem to work for me);

So I have a function that fires onClick. When I use the selectItem function, I can select the item directly, with no difficulty. However two functions, selectHighlightedItem, selectItemAtIndex might have regressed. looking at the code here: my first suspicion would be the selectItemAtIndex, since selectHighlightedItem (line 204) seems to depend on selectItemAtIndex (line 192);

Some important things to note:

• I am logging every state change using the Handler onStateChange and I can see that as I hover over items, and type, the state is properly changing correctly.
• I can also see the desired index is right when I am about to click, and am using the selectHighlightedItem, leading me to believe that it is probably fine itself.
• You can reproduce the behavior by commenting and uncommenting the functions in that click handler
• For me this also seems to affect the 'select on enter' that was working beforehand. This is unsurprising when I look here, (line 363) because the function calls selectHighlightedItem, which calls selectItemAtIndex

Its also possible I overlooked something obvious, and if I did, that won't surprise me at all :) I did my best to update this demo the right way, but if you think I made a mistake when I did, I appreciate the help.

Please let me know if I can add any more info :)

[kentcdodds]

Your issue is we changed value to item in getItemProps. Here's a working example.

[kentcdodds]

Thanks again for keeping up with the changes. Things are solidifying so hopefully you wont have to deal with this in the future :smile:

[ferdinandsalis]

@the-simian I think this also part of your problem https://github.com/paypal/downshift/issues/113

[the-simian]

Ah yep, there it is!

Man i thought I had gotten everything, but I forgot I had to remap that incoming property

😄 Thank you! 😄