Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typeahead: Quietly drops options beyond typeaheadOptionsLimit #6251

Open
Chealer opened this issue Jul 30, 2021 · 0 comments
Open

Typeahead: Quietly drops options beyond typeaheadOptionsLimit #6251

Chealer opened this issue Jul 30, 2021 · 0 comments

Comments

@Chealer
Copy link

Chealer commented Jul 30, 2021

Before opening an issue, please search for duplicates (opened and closed) https://github.com/valor-software/ngx-bootstrap/issues There's no need to open an issue here if you want to ask general question, use StackOverflow or Slack instead

Bug description:
The Typeahead component has a typeaheadOptionsLimit attribute, documented as follows:

Type: number
maximum length of options items list. The default value is 20

Featuring such a maximum is good, except:

  1. There is no way to set no maximum (at least, none documented).
  2. When that maximum is exceeded, the remaining options are quietly ignored.

While the component is unspecified, this will certainly break expectations, since the maximum has a default. In other words:

  1. Developers will unknowingly set an implicit limit, unless they are aware of the attribute, so there is no prevention.
  2. Users get no indication at all when the maximum is exceeded, so there is no runtime handling.

Plunker/StackBlitz that reproduces the issue: https://mw2qwy--run.stackblitz.io
(try search term "a")

Using Plunkr, StackBlitz is the best way to show your issue. Issues without link to an example of reproduction might be closed.

You can use one of starter templates:

Plunkr: https://plnkr.co/edit/0NipkZrnckZZROAcnjzB?p=preview

StackBlitz: https://stackblitz.com/edit/ngx-bootstrap?file=app%2Fapp.module.ts

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 5.2.0

Angular: 8.2.0

Bootstrap: 3.4.1

Build system: Angular CLI, System.js, webpack, starter seed: Angular CLI

Expected behavior

Developers should realize whenever they are setting such a limit. Otherwise, all options should be offered somehow, or at least users should be notified that some options are missing.

Possible solutions/mitigations:

  1. Make the typeaheadOptionsLimit parameter mandatory
  2. Do not set a limit by default
  3. Add some indication when options are discarded or hidden. This could be done by adding an element offering to show more, or just a pseudo-option at the bottom with a label like "13 extra options are hidden." Ideally, though, if the options are for example states of the U.S.A., the label would refer to states ("13 extra states are hidden; try refining your search term."), which would require an attribute to set usage-specific labels. A generic label could hardly by accessible, except in supported locales. There are - however - international conventions which could help for locales which don't have a generic label : the ellipsis ("…") and the plus sign ("+") could be ultimate fallback labels for a pseudo-option to show more options, although I can't confirm that these conventions are known in all cultures.
  4. Failing that, support defining a footer displayed after results, as Typeahead.js does with its templates option.
  5. Considering that Twitter presents the inspiration for Typeahead as an autocompletion widget with suggestions, it would surely help to portray Typeahead as a helper which suggests values, rather than as a filter which lists options supposed to be exhaustive. This could be done for developers by changing the documentation terminology and/or for users by adding an element, like a "Suggestions" header.

The first 2 are unfortunately not retroactive solutions.

Here are some related Typeahead.js issues:

...and a related corejs-typeahead issue:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants