Example, and question about api

[the-simian]

• downshift version: Beta
• node version: 8.2.1
• npm (or yarn) version: yarn 0.27.5

Relevant code or config

Hello! I've been fleshing out a super basic example that is for binding a list of object in the context of Material UI, that' I'd love to submit to the #1 when I've polished more.

see live example: https://codesandbox.io/s/QMGq4kAY

I had a question about the api, and its because I worked last night and also today, and I think I observed some of the values change. So quick questions:

1. is it going to be value or inputValue
2. is it going to be selectedItem or selectedValue
3. also in the version that had selectedItem the function clearSelection seemed to clear both the input and the selected Item (which was convenient), and the new one only clears the selected selectedValue/selectedItem, is there another way to clear the input now? I get stuck with [object object

Thank ya'll for the awesome plugin, so far I really like it!!

[the-simian]

Oh I wanted to add: I only made a searchTemplate entry point so that the search could apply to whatever the enduser configures. For instance maybe you want to search 'names and emails' or 'just names' - you can override the search string. I feel like for this example it might be more practical to search only titles, but I wanted to demonstrate that one could override that property.

Another (more real-world) example might be an object model where the firstname and last name are seperate properties, but you want a search box where users appear to be searching Doe, Jane, Jane Doe.
Imagine you get Json like this:

const people = [
  { firstname: 'Jane', lastname: 'Doe', age: 90},
  { firstname: 'Jonny', lastname: 'Smith', age: 9},
  { firstname: 'Ghengis', lastname: 'Khan', age: 9000},
]

So you're binding the combobox to a list of people, You can template like ${item.firstname} ${item.lastname}, really whatever you need. In this case you'd search across two properties. I find that in practice the ability to set a customize able search 'template' (rather than just a single property) is handy.

Similarly, the ability to override the list Item Template. Seemed sensible to have a default, and then the ability to provide something 'fancier' depending on how you might visualize the data.

That said, I know this is a pretty bread and butter combobox, I'd like to experiment with some nontraditional interfaces (maybe you filter a list of tiles, etc) but I'd like to do this after I get some feedback on the api surface, and the 'downshift' way you envision handling clear selections.

If I were to critique my own demo:

Right now I have one part that feels a bit 'janky' and it has to do with dealing with the stringification of the selected Item. I wanted to make it so that selecting an item properly templates the text you see in the input, but In order to do that, I needed to make sure the user wan't stringfying an object (hence the [Object object] string check). This works because the moment you start typing, or deleting, we make the input based on the inputValue and not the templated selectedValue.

Overall I love the direction this component has taken to decouple ui and the 'searchy bits'. The design decision to forgo ui decisions and stick to the state management and the functions is A+. I've written 3 comboboxes in my career, 1 in jQuery UI ( I'm old :) ), 1 in angular and one other in React ( around 2014 ). Each of those took a long time (many days) to complete, but I had this example up-and-going in like a few hours. I'm super happy with downshift, and I think others will be too.

[jgoux]

Hello,

+1 for clearSelection clearing only the selectedValue, I'd expect it to clear the inputValue as well.

Also, could we reduce the API by removing clearSelection and passing null or undefined to selectValue ?

[kentcdodds]

clearSelection does more than just set the selectedItem (used to be selectedValue, see #104) to null. It sets it to null, updates the input value, and focuses on the input. If you don't want to do all that then you can use the other APIs. I think that this is valuable and common enough to justify keeping clearSelection around.

@the-simian, I think that what you're talking about is properly filtering and sorting your items. That's out of scope of this project, however you really should look at match-sorter which does a terrific job at this kind of thing and works great with downshift 👍

Good luck!

[kentcdodds]

Also, I'm so pleased that you're enjoying this module 😄

[kentcdodds]

I'm pretty sure that the latest version should clear up a lot of confusion.

[the-simian]

@kentcdodds , Hi, I think we might be talking past each other, the problem is that clearSelection does not currently also clear the input as well, and results in [Object object], I am not saying we need to get rid of clear selection, I am saying it behaved differntly (and more expectedly) in a slightly earlier version.

If you look at my example I commented where I'm having to 'guard' against the object stringification that is uncleared.

I was unclear if this was what was intended, or a regression. (The api has changed terms in the last couple days). Really 'clearing' is the only part of the demo I am not sure I'm doing correctly.

I am currently filtering with the native filter method now, so I'm not asking about how to do that, currently.

[the-simian]

thanks for clearing up on my other api questions - I'm looking over the diff to remove any stale references in my demo

[kentcdodds]

clearSelection does not currently also clear the input as well,

Yes! You're right! It did that, but I just fixed it 😄 Try 1.0.0-beta.15 😉

Thank you so much!

[the-simian]

Will do, and thank you @kentcdodds :)