Sometimes items is an empty array when clicking an item

[ferdinandsalis]

• downshift version: latest
• node version: 8.4
• npm (or yarn) version: 5.3.0

What you did:
Select an item per left mouse click

What happened:
Most of the time it would select the item as expected. However sometimes it will not.

Reproduction repository:
https://codesandbox.io/s/l2yk1qqqrm

Problem description:*
This is due to the fact that at the point of time the item is clicked it has not yet been added to the items array.

Suggested solution:
No idea yet how to solve this.

[kentcdodds]

Thanks for the issue @ferdinandsalis!

Yeah, looking into this I've realized something kinda tricky about the way that downshift is implemented. We make the assumption that you'll render all items you need synchronously on every render. And you can make this work if the component you wrap is the whole downshift component rather than just the list (see this example and the Apollo example).

If for some reason you'd rather connect your menu, then maybe there's something we can do...

What if we exposed a clearItems method for you to call when the items load? Here's a demo of what that might look like: https://codesandbox.io/s/rwrjzyqm7q

In that example, I do some magic to simulate the built-in API, but it really would be as easy as calling clearItems anytime your list is rendered.

If you like that, then I welcome you to make a PR to add it. Here's what you'd need to do:

1. Document the new method in the README (under actions)
2. Test the new functionality (in the misc tests)
3. Add clearItems to getStateAndHelpers
4. Implement clearItems (somewhere around here maybe?)

Let me know what you think :)

[tansongyang]

You could also add TypeScript types.

[kentcdodds]

Yeah, that'd be great! Should hopefully be pretty straightforward given the existing types and the simplicity of this API. It's just a function with no args and no return :)

One other thing, you could replace this with a call to clearItems

[ferdinandsalis]

I am bit confused since I am doing the same thing as in your Apollo example, or am I missing something? Also could you elaborate more on the problem, I dont yet understand it and how clearItems solves the problem?

[kentcdodds]

The Apollo example wraps the component that renders <Downshift />, yours renders the items within the downshift component.

Downshift keeps track of all the items on its own instance. It clears them every render and adds them all to the list as they're rendered. The problem is that you're rerendering the menu yourself (or rather Apollo is), so the items don't get cleared between renders, leading to unpredictable contents in the items array.

So if you want to be able to dynamically render items without rerendering all of downshift, you'll have to clear the items yourself.

Of course, an alternative would be to wrap the whole component in Apollo (rather than just the menu) like the existing example... :)

[ferdinandsalis]

@kentcdodds thanks for explaining! I will take a look.

[ferdinandsalis]

Implemented in #187

[ferdinandsalis]

That landed quickly. Thanks @kentcdodds. I guess I can close this.

[kentcdodds]

Thank you! 🎉

[ferdinandsalis]

@kentcdodds sorry for being a pest but sadly this did not fix the issue. One more detail I noticed about the issue is that when using the cursor keys and enter to select an item it always works. I think it must have to do with the mouse over and the re-renders. Every little movement will lead to a re-render and clearing of items and adding of new items. Sometimes a click will then stumble upon an empty items array. I hope this is clear. Happy to chat about it.

[kentcdodds]

Yeah, that would be an issue... Do you not have any control over what props result in a new network request? You should only make a request when the input value prop changes... Does the higher order component have something for that?

[ferdinandsalis]

Yes that is what I am doing. Only if inputValue changes a new network request is made. I dont see how this is related to the issue though. I am doing exactly same as your apollo example but also I am skipping the hoc if the inputValue is empty.

const withData = graphql(LIST_ITEM_SEARCH, {
  skip: ({ inputValue }) => {
    return inputValue == null || inputValue === '' ? true : false;
  },
  options: ({ inputValue, listId }) => ({
    variables: { searchString: inputValue, listId },
    fetchPolicy: 'cache-and-network'
  })
});

[kentcdodds]

That logic isn't preventing a rerender when the input doesn't change. It's preventing rerender when the input is falsy.