Today in the morning I spend couple of hours trying to implement dropdown with filter and “valid only” entry. I started my endeavor with ng-bootstrap dropdown (since I’m working on Angular app), quickly realizing that it will not work since there is no filter option. Next I figured that a typeahead will fit much much better.

Everything worked out very well except for one big caveat: the typeahead does not clear “<input>” field when entry is not valid (not in the list of options). After monkeying with “onBlur” for about 20 minutes, a sane thought occurred in my head: “What am I doing? Hacking? There must be a straight forward way!”.

Welcome Multi-Select Dropdown

The Multi-Select Dropdown also supports single option:

It looks promising and I’m very happy someone figured it out, however I wonder why doesn’t ng-bootstrap include such a useful component?


Leave a Reply