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.

Sign up for GitHub

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

Jump to bottom

[Autocomplete]: autoActiveFirstOption not working when tabbing in with disabled floatLabel #13734

Closed
thomaspink opened this issue Oct 22, 2018 · 1 comment · Fixed by #14507, #13774 or #14414
Closed

[Autocomplete]: autoActiveFirstOption not working when tabbing in with disabled floatLabel #13734

thomaspink opened this issue Oct 22, 2018 · 1 comment · Fixed by #14507, #13774 or #14414
Assignees
@crisbeto
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@thomaspink
Copy link
Contributor

Bug, feature request, or proposal:

When tabbing into (not clicking!) an autocomplete with autoActiveFirstOption enabled and floatLabel disabled on the form field, the first option does not become active.
It will become active if you press another key after tabbing in, inspecting the element or any other action that cause an event for the zone.

When adding this._changeDetectorRef.detectChanges(); in autocomplete-trigger.ts at line 500, it works (src/lib/autocomplete/autocomplete-trigger.ts:500).

My guess is that at this point the zone is stable and all the changes done (setting the active option, ...) are not picked up for the CD.
When enabling floatLabel, it works as expected. So it seems that the floatLabel triggers another CD after that, and the changes will get recognized.

What is the expected behavior?

First option should be active.

What is the current behavior?

First option is not active.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-j6jza7?file=app/autocomplete-auto-active-first-option-example.html

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Current versions.
Forked the existing material autocomplete autoActiveFirstOption stackblitz example.
@thomaspink thomaspink mentioned this issue Oct 22, 2018
Closed
@crisbeto crisbeto self-assigned this Oct 23, 2018
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent has pr labels Oct 23, 2018
crisbeto added a commit to crisbeto/material2 that referenced this issue Oct 23, 2018
@crisbeto
fix(autocomplete): auto-highlighted first option not display correctl…
91d90df 
…y if the floating label is disabled

Fixes the first option not appearing as highlighted if the consumer has set `floatLabel="never"` and `autoActiveFirstOption`. It looks like we were depending on the `transitioned` event from the label to kick off the change detection that shows the highlight.

Fixes angular#13734.
@crisbeto crisbeto mentioned this issue Oct 23, 2018
Merged
vivian-hu-zz pushed a commit that referenced this issue Nov 6, 2018
@crisbeto
fix(autocomplete): auto-highlighted first option not display correctl…
6d53ce7 
…y if the floating label is disabled

Fixes the first option not appearing as highlighted if the consumer has set `floatLabel="never"` and `autoActiveFirstOption`. It looks like we were depending on the `transitioned` event from the label to kick off the change detection that shows the highlight.

Fixes #13734.
mmalerba pushed a commit that referenced this issue Dec 4, 2018
@crisbeto @mmalerba
fix(autocomplete): auto-highlighted first option not display correctl…
c99c512 
…y if the floating label is disabled (#13774)

Fixes the first option not appearing as highlighted if the consumer has set `floatLabel="never"` and `autoActiveFirstOption`. It looks like we were depending on the `transitioned` event from the label to kick off the change detection that shows the highlight.

Fixes #13734.
@crisbeto crisbeto mentioned this issue Dec 6, 2018
Closed
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 6, 2018
@crisbeto
fix(autocomplete): auto-highlighted first option not display correctl…
a4f51a2 
…y if the floating label is disabled

Fixes the first option not appearing as highlighted if the consumer has set `floatLabel="never"` and `autoActiveFirstOption`. It looks like we were depending on the `transitioned` event from the label to kick off the change detection that shows the highlight.

Fixes angular#13734.
@crisbeto crisbeto mentioned this issue Dec 6, 2018
Merged
mmalerba pushed a commit that referenced this issue Dec 10, 2018
@crisbeto @mmalerba
fix(autocomplete): auto-highlighted first option not display correctl…
244d459 
…y if the floating label is disabled (#13774)

Fixes the first option not appearing as highlighted if the consumer has set `floatLabel="never"` and `autoActiveFirstOption`. It looks like we were depending on the `transitioned` event from the label to kick off the change detection that shows the highlight.

Fixes #13734.
vivian-hu-zz pushed a commit that referenced this issue Dec 12, 2018
@crisbeto @vivian-hu-zz
fix(autocomplete): auto-highlighted first option not display correctl…
53d2b58 
…y if the floating label is disabled (#14414)

Fixes the first option not appearing as highlighted if the consumer has set `floatLabel="never"` and `autoActiveFirstOption`. It looks like we were depending on the `transitioned` event from the label to kick off the change detection that shows the highlight.

Fixes #13734.
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 13, 2018
@crisbeto
fix(autocomplete): auto-highlighted first option not display correctl…
f85aa74 
…y if the floating label is disabled

Fixes the first option not appearing as highlighted if the consumer has set `floatLabel="never"` and `autoActiveFirstOption`. It looks like we were depending on the `transitioned` event from the label to kick off the change detection that shows the highlight.

Fixes angular#13734.
@crisbeto crisbeto mentioned this issue Dec 13, 2018
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 21, 2018
@crisbeto
fix(autocomplete): auto-highlighted first option not display correctl…
1474a72 
…y if the floating label is disabled

Fixes the first option not appearing as highlighted if the consumer has set `floatLabel="never"` and `autoActiveFirstOption`. It looks like we were depending on the `transitioned` event from the label to kick off the change detection that shows the highlight.

Fixes angular#13734.
josephperrott pushed a commit to josephperrott/components that referenced this issue Jan 14, 2019
@crisbeto @josephperrott
fix(autocomplete): auto-highlighted first option not display correctl…
d39c0a7 
…y if the floating label is disabled (angular#13774)

Fixes the first option not appearing as highlighted if the consumer has set `floatLabel="never"` and `autoActiveFirstOption`. It looks like we were depending on the `transitioned` event from the label to kick off the change detection that shows the highlight.

Fixes angular#13734.
josephperrott pushed a commit to josephperrott/components that referenced this issue Jan 14, 2019
@crisbeto @josephperrott
fix(autocomplete): auto-highlighted first option not display correctl…
fbdc018 
…y if the floating label is disabled (angular#14414)

Fixes the first option not appearing as highlighted if the consumer has set `floatLabel="never"` and `autoActiveFirstOption`. It looks like we were depending on the `transitioned` event from the label to kick off the change detection that shows the highlight.

Fixes angular#13734.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jun 8, 2019
@crisbeto
fix(autocomplete): auto-highlighted first option not display correctl…
8630e2b 
…y if the floating label is disabled

Fixes the first option not appearing as highlighted if the consumer has set `floatLabel="never"` and `autoActiveFirstOption`. It looks like we were depending on the `transitioned` event from the label to kick off the change detection that shows the highlight.

Fixes angular#13734.
crisbeto added a commit to crisbeto/material2 that referenced this issue Aug 18, 2019
@crisbeto
fix(autocomplete): auto-highlighted first option not display correctl…
386dc10 
…y if the floating label is disabled

Fixes the first option not appearing as highlighted if the consumer has set `floatLabel="never"` and `autoActiveFirstOption`. It looks like we were depending on the `transitioned` event from the label to kick off the change detection that shows the highlight.

Fixes angular#13734.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019
crisbeto added a commit to crisbeto/material2 that referenced this issue Feb 28, 2022
@crisbeto
fix(material/autocomplete): auto-highlighted first option not display…
dd53ef7 
… correctly if the floating label is disabled

Fixes the first option not appearing as highlighted if the consumer has set `floatLabel="never"` and `autoActiveFirstOption`. It looks like we were depending on the `transitioned` event from the label to kick off the change detection that shows the highlight.

Fixes angular#13734.
crisbeto added a commit that referenced this issue Feb 28, 2022
@crisbeto
fix(material/autocomplete): auto-highlighted first option not display…
ed2f516 
… correctly if the floating label is disabled (#14507)

Fixes the first option not appearing as highlighted if the consumer has set `floatLabel="never"` and `autoActiveFirstOption`. It looks like we were depending on the `transitioned` event from the label to kick off the change detection that shows the highlight.

Fixes #13734.

(cherry picked from commit b7ee958)
crisbeto added a commit that referenced this issue Feb 28, 2022
@crisbeto
fix(material/autocomplete): auto-highlighted first option not display…
b7ee958 
… correctly if the floating label is disabled (#14507)

Fixes the first option not appearing as highlighted if the consumer has set `floatLabel="never"` and `autoActiveFirstOption`. It looks like we were depending on the `transitioned` event from the label to kick off the change detection that shows the highlight.

Fixes #13734.
forsti0506 pushed a commit to forsti0506/components that referenced this issue Apr 3, 2022
@crisbeto @forsti0506
fix(material/autocomplete): auto-highlighted first option not display…
7e303b6 
… correctly if the floating label is disabled (angular#14507)

Fixes the first option not appearing as highlighted if the consumer has set `floatLabel="never"` and `autoActiveFirstOption`. It looks like we were depending on the `transitioned` event from the label to kick off the change detection that shows the highlight.

Fixes angular#13734.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
2 participants
@thomaspink @crisbeto