Skip to content

MAT-SELECT: On window resize some options from the mat-select options (mat-options) cannot be seen or selected #18901

@mihaionduma

Description

@mihaionduma

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/angular-lr4cn8

Steps to reproduce:

  1. Build a mat-select with more than 6 options
  2. Shrink the window to about 300 px height,
  3. center the mat select in those 300 px,
  4. Click on the mat-select
  5. Observe that the last/first elements are not in view even though you can scroll up to the last/first element.

sw-select-issue-first image

sw-select-issue-second-image

Expected Behavior

What behavior were you expecting to see?

The expected behavior should be that i would be able to scroll to the last/first element and that the last element should be seen in the window.

Actual Behavior

What behavior did you actually see?

Even though i can scroll up to the last/first element they're not visible in the window

Environment

  • Angular: 9.0.0
  • CDK/Material: 9.1.3
  • Browser(s): Google Chrome Version 80.0.3987.132
  • Operating System (e.g. Windows, macOS, Ubuntu):

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/select

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions