From 557ac0d0539c58a857d20abf3bd86f4dafb10e88 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 7 Jan 2022 21:00:50 +0200
Subject: [PATCH] fix(material-experimental/mdc-select): change max height to
 show scrollability (#24129)

Increases the maximum height of the MDC-based select panel in order to partially show the next option so that it is easier to see when the panel is scrollable.

Related to b/211518654.
---
 .../mdc-select/select.scss                    |  2 +-
 .../mdc-select/select.spec.ts                 | 26 ++++++-------------
 2 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/src/material-experimental/mdc-select/select.scss b/src/material-experimental/mdc-select/select.scss
index c201f400dd2e..7defc9a0bf9d 100644
--- a/src/material-experimental/mdc-select/select.scss
+++ b/src/material-experimental/mdc-select/select.scss
@@ -7,7 +7,7 @@
 
 $mat-select-arrow-size: 5px !default;
 $mat-select-arrow-margin: 4px !default;
-$mat-select-panel-max-height: 256px !default;
+$mat-select-panel-max-height: 275px !default;
 $mat-select-placeholder-arrow-space: 2 *
   ($mat-select-arrow-size + $mat-select-arrow-margin);
 $leading-width: 12px !default;
diff --git a/src/material-experimental/mdc-select/select.spec.ts b/src/material-experimental/mdc-select/select.spec.ts
index d14495631d09..fec21af6b1ba 100644
--- a/src/material-experimental/mdc-select/select.spec.ts
+++ b/src/material-experimental/mdc-select/select.spec.ts
@@ -2237,9 +2237,8 @@ describe('MDC-based MatSelect', () => {
           dispatchKeyboardEvent(host, 'keydown', DOWN_ARROW);
         }
 
-        // <top padding> + <option index * height> - <panel height> = 8 + 16 * 48 - 256 = 520
-        // <top padding> + <option index * height> - <panel height> = 8 + 16 * 48 - 256 = 520
-        expect(panel.scrollTop).withContext('Expected scroll to be at the 16th option.').toBe(520);
+        // <top padding> + <option index * height> - <panel height> = 8 + 16 * 48 - 275 = 501
+        expect(panel.scrollTop).withContext('Expected scroll to be at the 16th option.').toBe(501);
       }));
 
       it('should scroll up to the active option', fakeAsync(() => {
@@ -2252,7 +2251,6 @@ describe('MDC-based MatSelect', () => {
           dispatchKeyboardEvent(host, 'keydown', UP_ARROW);
         }
 
-        // <top padding> + <option index * height> = 8 + 9 * 48 = 440
         // <top padding> + <option index * height> = 8 + 9 * 48 = 440
         expect(panel.scrollTop).withContext('Expected scroll to be at the 9th option.').toBe(440);
       }));
@@ -2277,12 +2275,8 @@ describe('MDC-based MatSelect', () => {
         // Note that we press down 5 times, but it will skip
         // 3 options because the second group is disabled.
         // <top padding> + <(option index + group labels) * height> - <panel height> =
-        //    8 + (9 + 3) * 48 - 256 = 328
-        // Note that we press down 5 times, but it will skip
-        // 3 options because the second group is disabled.
-        // <top padding> + <(option index + group labels) * height> - <panel height> =
-        //    8 + (9 + 3) * 48 - 256 = 328
-        expect(panel.scrollTop).withContext('Expected scroll to be at the 9th option.').toBe(328);
+        //    8 + (9 + 3) * 48 - 275 = 309
+        expect(panel.scrollTop).withContext('Expected scroll to be at the 9th option.').toBe(309);
       }));
 
       it('should scroll to the top when pressing HOME', fakeAsync(() => {
@@ -2298,7 +2292,6 @@ describe('MDC-based MatSelect', () => {
         dispatchKeyboardEvent(host, 'keydown', HOME);
         fixture.detectChanges();
 
-        // 8px is the top padding of the panel.
         // 8px is the top padding of the panel.
         expect(panel.scrollTop).withContext('Expected panel to be scrolled to the top').toBe(8);
       }));
@@ -2308,12 +2301,10 @@ describe('MDC-based MatSelect', () => {
         fixture.detectChanges();
 
         // <top padding> + <option amount> * <option height> - <panel height> =
-        //    8 + 30 * 48 - 256 = 1192
-        // <top padding> + <option amount> * <option height> - <panel height> =
-        //    8 + 30 * 48 - 256 = 1192
+        //    8 + 30 * 48 - 275 = 1173
         expect(panel.scrollTop)
           .withContext('Expected panel to be scrolled to the bottom')
-          .toBe(1192);
+          .toBe(1173);
       }));
 
       it('should scroll to the active option when typing', fakeAsync(() => {
@@ -2325,9 +2316,8 @@ describe('MDC-based MatSelect', () => {
         }
         flush();
 
-        // <top padding> + <option index * height> - <panel height> = 8 + 16 * 48 - 256 = 520
-        // <top padding> + <option index * height> - <panel height> = 8 + 16 * 48 - 256 = 520
-        expect(panel.scrollTop).withContext('Expected scroll to be at the 16th option.').toBe(520);
+        // <top padding> + <option index * height> - <panel height> = 8 + 16 * 48 - 275 = 501
+        expect(panel.scrollTop).withContext('Expected scroll to be at the 16th option.').toBe(501);
       }));
 
       it('should scroll to top when going to first option in top group', fakeAsync(() => {