Downshift.js as a list filter

Question

I just wanted to try and see how Downshift could be used as a list filter, ie the "drop down" menu doesn't close.

I found that fairly easy, but then found it pretty difficult to overcome the default behaviour that when you click an item, the input is populated with its value.

I've create an example of how I would tackle this (see below), but it seems complicated. Ideally I would've liked to just do a prevent default type thing on the click handler and provided my own, but I didn't see an obvious way of doing that. What is the Downshift recommended way?

https://codesandbox.io/s/laughing-leavitt-pyruxj?file=/src/downshift/ordered-examples/02-complete-autocomplete.js (click the module preview button)

I started by overriding the click behaviour, but then found I also needed to do blur and others, and i didn't want to miss an edge case.

Answer 1

You should use the itemToString prop and return an empty string.

<Downshift
  ...
  itemToString={() => ""}
>