Blueprint: Component request: Typeahead / Autocomplete

[anasbud]

Firstable, great job !

Just one thing, I was looking for a typeahead component and didn't find it... maybe I didn't see it ?

Thanks !

[adidahiya]

Hi @anasbud, thanks for your question. We plan to build something that looks like a typeahead component in the near future. In fact, we have a basic implementation of this in the docs site navigator, but haven't yet solidified the API for broader consumption. Here's what that code looks like: https://github.com/palantir/blueprint/blob/42ac7930b92bebe978bb44b13e2e084f60367153/packages/docs/src/components/navigator.tsx

[ConneXNL]

First of all. Great work on the library so far. Love the use of Typescript, tether and the great documentation in the code itself.

I am wondering if Blueprint is planning to adopt other libraries or that everything will be written from scratch (considering your use of TS). And how do you plan to offer/maintain functionality that is on par with separate libraries that solve a single problem.

I raise this question as I was looking trough the components to find something that offers the same functionality as a standalone library like react-select (which is somewhat related to typeahead of this issue).

Do you have any plans or comments regarding an advanced Select component?

[adidahiya]

Great question @ConneXNL! For every feature we add to Blueprint, we try to carefully consider existing libraries that might solve the problem at hand, and they _need not be written in TypeScript_ (of course, that's a plus) [1]. We have tried using select2 and react-select for a while in various places, and they've worked ~ok for us, but I think we've reached the tipping point where we'd like to implement our own advanced select / typeahead component using Blueprint building blocks [2].

Another relevant example is the datepicker component -- in that case, we found react-day-picker to be robust and we were able to customize it to get all the interactions and visual design how we wanted, so we decided to take it on as a dependency in blueprintjs/datetime.

[1] At the same time, we don't want to pull in too many dependencies. It's a case-by-case judgement call.
[2] select2 brings in JQuery baggage; react-select doesn't support the kind of complex positioning available via our Popover, etc.

Update (2/1/2017): there might be some hope for react-select yet; see https://github.com/JedWatson/react-select/issues/1481

[jmcampanini]

can the results dropdown be able to be styled and/or have custom data (icons, etc.)?

[adidahiya]

@jmcampanini we'll make sure to make the component very configurable such that you can provide your own renderers for things like result items.

[liesislukas]

Any plans when it will be available? Thanks for all your work, blueprint rocks🤘 !

[llorca]

Some time in the next couple of months

[burakcan]

Any updates? :)

[tgreenwatts]

This isn't being actively worked on, but we're planning to start within the next few weeks

[burakcan]

If the api design decision is made; I can work on this one after 8th of April.

[AnthoniG]

Any word on this?
It seems to have been closed.

[giladgray]

definitely not closed but the team has been consumed with other priorities (see: all those awesome table features in v1.15.0). these Dropdown and Typeahead components had to fall behind some important feature requests. i'm sorry to say that i have no idea when we'll actually get to them 😢

[AnthoniG]

thanks @giladgray
Nw's, I still love what you are doing 😃

I am planning on using BlueprintJS in my next project (a very large, very public project) and I am in need of a Typeahead style drop down. Will have to 'cobble' my own together for now and then replace it once the official one comes out.

I love the one in your documents. Is there any source to that, this way it gives me at least a leg-up etc ?

[adidahiya]

@AnthoniG see my comment above, https://github.com/palantir/blueprint/issues/118#issuecomment-260151560, the source still lives there, you just need to switch to master for the latest version.

[burakcan]

I ended up using a custom implementation which is very similar to the one on the documentation website. I'll try to extract and publish it when I have time.

[AnthoniG]

@burakcan Sounds good. Look forward to that. Please let me know when you do 😃
@adidahiya Cheers will give it a look.

[liesislukas]

I've built one, you can use it.

sample, code & docs:
https://github.com/liesislukas/react-dropdown-autocomplete-with-search

[AnthoniG]

@liesislukas Thank you. I will use this, most definitely.
Just need to get it so it's Typescript friendly is all 😄

[gsi-chao]

Any update about the autocomplete field???

[adidahiya]

@gsi-chao it's called Suggest https://blueprintjs.com/docs/#select/suggest