Resizing the mat-option with height and line-height for the mat-autocomplete alters the autocomplete keyboard scrolling

[oscarlagatta]

Bug, feature request, or proposal:

Once the .mat-option class height and line-height have been modified the keyboard scrolling looses focus of the active option

What is the expected behavior?

the autocomplete results should scroll with the keyboard active item selected

What is the current behavior?

if the size of the .mat-option is modified the autocomplete scrolling loses the active option selected by the keyboard arrow (up/down)

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

apply the following css styling

.mat-autocomplete-panel {
max-height: 455px !important;
}
.mat-option {
height: 25px !important;
line-height: 25px !important;
}

What is the use-case or motivation for changing an existing behavior?

to behave as expected while scrolling with the keyboard

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

"@angular/core": "^5.0.0",
"@angular/material": "^5.2.1",
WINDOWS
Typescript 2.7.1
Chrome Version 63.0.3239.84 (Official Build) (64-bit)

Is there anything else we should know?

[crisbeto]

Duplicate of #7211 (mat-select and mat-autocomplete use the same option component).

[oscarlagatta]

Thanks I don’t see how one is related to the other, can you pls explain ?

[crisbeto]

We currently assume that all options will have a particular height, which is why we have to truncate them as well. Your issue comes from the fact that you're overriding the height.

[oscarlagatta]

Thank you for the clarification, I wonder what’s the alternative, or just won’t happen as it’s what I understand. You can close the ticket. Thank you for your feedback

…

On Tue, 20 Feb 2018 at 19:01, Kristiyan Kostadinov ***@***.***> wrote: We currently assume that all options will have a particular height, which is why we have to truncate them as well. Your issue comes from the fact that you're overriding the height. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#10038 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEW4EeS1oPcFXXB7o2TAxweb8AL6g-5hks5tWxZ-gaJpZM4SL2Kl> .

[DMezhenskyi]

@crisbeto Hi! Could you please clarify what the reason to hardcode the height of mat-option component? Why it isn't possible to calculate height once a mat-option was rendered and then to use this value to calculate a correct scrollTop? Or even better - to be able to define mat-option height as @ Input() of MatAutocomplete or MatSelect ? Thanks

[supersinex]

I would also love a fix for this. Some of our autocompletes are composed of two or more lines of information, so the ability to change the height of the mat-option while maintaining the ability to navigate with the arrow keys would be great.

[noririco]

This issue is so annoying, And how the hell do you change the
AUTOCOMPLETE_OPTION_HEIGHT
no docs no nothing ;/

[Sahil624]

I think option height and autocomplete height should be configurable. Or there should be a dense view. (My use case)

[mohamed-badaoui]

RIght now, the only way to overcome this is probably to add some global main style, like this :(

.mat-autocomplete-panel mat-option {
height: 25px;
}

[deepthir9977]

Hi guys,
i am using mat autocomplete i had Resizing the mat-option with height and line-height for the mat-autocomplete like below
.mat-autocomplete-panel mat-option {
height: 25px;
}
i am not able to see the highlighted option on arrow key down.
is there any solution please help.

[Sahil624]

Hi guys,
i am using mat autocomplete i had Resizing the mat-option with height and line-height for the mat-autocomplete like below
.mat-autocomplete-panel mat-option {
height: 25px;
}
i am not able to see the highlighted option on arrow key down.
is there any solution please help.

I think height of autocomplete and mat-option is constant , so when you scroll with keys it will only scroll when that constant height is breached (I'm not 100% sure but I think it works like this). When you define height globally It only changes the height but not the constants hardcoded. I had same issue I fixed it with some rxjs but it created some new issues, so I reset global styles and used default styles by angular.

I don't think that there is any workaround. But if anyone knows any please comment

[angular-automatic-lock-bot]

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.}