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 is not focused after selecting an item by click #2792

Closed
fbasso opened this issue Oct 12, 2018 · 4 comments · Fixed by #2805
Closed

Typeahead is not focused after selecting an item by click #2792

fbasso opened this issue Oct 12, 2018 · 4 comments · Fixed by #2805

Comments

@fbasso
Copy link
Member

fbasso commented Oct 12, 2018

...but it is after selecting an item by [enter]

This issue is easily reproductible on the demo site : https://ng-bootstrap.github.io/#/components/typeahead/examples#focus

@tobihagemann
Copy link

tobihagemann commented Nov 6, 2018

I think this fix brought up an issue in my project that I can't directly reproduce on ng-bootstrap's website.

I took the "Wikipedia search" example and put some code in from the "Open on focus" example.

Here is the result: https://stackblitz.com/edit/angular-f1e9jn

As you can see, after clicking an entry, the typeahead regains focus (as this issue was trying to fix). However, by doing so, a new search is started and the popup is being reopened, which didn't happen before ng-bootstrap 3.1.1 (typo, I meant:) 3.3.1 (actually, I'm not exactly sure about the version number but I've been using this library for quite some time and it's a "recent" change).

You can workaround this issue by replacing

const inputFocus$ = this.focus$;

with

const inputFocus$ = this.focus$.pipe(filter(() => this.instance.isPopupOpen()));

I don't know why the "Open on focus" example doesn't behave like this. Maybe it's because the data is loaded instantly and not loaded remotely as in the "Wikipedia search" example.

Is this an intended behavior? Is my workaround actually the way to do it or should this be fixed in ng-bootstrap?

Edit: Oh well, I don't think my workaround is the way to do it. "Open on focus" actually doesn't work at all anymore. But yeah, it fixes the "clicking reopens the popup menu instantly" bug.

Edit2: Yeah, my workaround doesn't make any sense, just remove inputFocus$ completely. "Open on focus" just doesn't work anymore because you can't distinguish between an actual focus or an auto-focus by the breaking change.

@lucasklaassen
Copy link

lucasklaassen commented Nov 8, 2018

@tobihagemann This definitely broke my project too. It triggers the input which fires another search with the selected item as the query.

Edit: For future reference this breaking change was introduced in version 3.3.0.

@tobihagemann
Copy link

Should we open a new issue for this?

@pkozlowski-opensource
Copy link
Member

@lucasklaassen @tobihagemann yes, please open a new issue with a minimal reproduce scenario. Thnx!

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

Successfully merging a pull request may close this issue.

6 participants