From 2af210eed1ebfa1c211f966ae7f770976f8c399d Mon Sep 17 00:00:00 2001
From: Martin Forstner <martin@forsti.eu>
Date: Thu, 25 Aug 2022 21:16:41 +0200
Subject: [PATCH] chore: current working state

---
 src/cdk/a11y/key-manager/list-key-manager.ts | 19 +++++++++++++++----
 src/material/select/select.spec.ts           |  3 +++
 src/material/select/select.ts                |  1 +
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/cdk/a11y/key-manager/list-key-manager.ts b/src/cdk/a11y/key-manager/list-key-manager.ts
index cc549b2bdbb5..c85e43ecd93b 100644
--- a/src/cdk/a11y/key-manager/list-key-manager.ts
+++ b/src/cdk/a11y/key-manager/list-key-manager.ts
@@ -52,6 +52,7 @@ export class ListKeyManager<T extends ListKeyManagerOption> {
   private _horizontal: 'ltr' | 'rtl' | null;
   private _allowedModifierKeys: ListKeyManagerModifierKey[] = [];
   private _homeAndEnd = false;
+  private _pageUpAndDown = {enabled: false, scrollValue: 10};
 
   /**
    * Predicate function that can be used to check whether an item should be skipped
@@ -196,6 +197,16 @@ export class ListKeyManager<T extends ListKeyManagerOption> {
     return this;
   }
 
+  /**
+   * Configures the key manager to activate the first and last items
+   * respectively when the Home or End key is pressed.
+   * @param enabled Whether pressing the Home or End key activates the first/last item.
+   */
+  withPageUpDown(enabled: boolean = true, scrollValue: number = 10): this {
+    this._pageUpAndDown = {enabled, scrollValue};
+    return this;
+  }
+
   /**
    * Sets the active item to the item at the index specified.
    * @param index The index of the item to be set as active.
@@ -283,16 +294,16 @@ export class ListKeyManager<T extends ListKeyManagerOption> {
         }
 
       case PAGE_UP:
-        if (isModifierAllowed) {
-          this.setFirstItemActive();
+        if (this._pageUpAndDown.enabled && isModifierAllowed) {
+          this._setActiveItemByIndex(this._activeItemIndex - this._pageUpAndDown.scrollValue, 1);
           break;
         } else {
           return;
         }
 
       case PAGE_DOWN:
-        if (isModifierAllowed) {
-          this.setLastItemActive();
+        if (this._pageUpAndDown.enabled && isModifierAllowed) {
+          this._setActiveItemByIndex(this._activeItemIndex + this._pageUpAndDown.scrollValue, -1);
           break;
         } else {
           return;
diff --git a/src/material/select/select.spec.ts b/src/material/select/select.spec.ts
index 744fa9bbab36..ae8d0e9b917d 100644
--- a/src/material/select/select.spec.ts
+++ b/src/material/select/select.spec.ts
@@ -2421,11 +2421,14 @@ describe('MDC-based MatSelect', () => {
           .withContext('Expected panel to be scrolled down.')
           .toBeGreaterThan(0);
 
+        expect(fixture.componentInstance.select._keyManager.activeItemIndex).toBe(20);
+
         dispatchKeyboardEvent(host, 'keydown', PAGE_UP);
         fixture.detectChanges();
 
         // 8px is the top padding of the panel.
         expect(panel.scrollTop).withContext('Expected panel to be scrolled to the top').toBe(8);
+        expect(fixture.componentInstance.select._keyManager.activeItemIndex).toBe(10);
       }));
 
       it('should scroll to the bottom of the panel when pressing PAGE_DOWN', fakeAsync(() => {
diff --git a/src/material/select/select.ts b/src/material/select/select.ts
index 8fcc0eb77334..6649e16b9402 100644
--- a/src/material/select/select.ts
+++ b/src/material/select/select.ts
@@ -914,6 +914,7 @@ export abstract class _MatSelectBase<C>
       .withVerticalOrientation()
       .withHorizontalOrientation(this._isRtl() ? 'rtl' : 'ltr')
       .withHomeAndEnd()
+      .withPageUpDown()
       .withAllowedModifierKeys(['shiftKey']);
 
     this._keyManager.tabOut.pipe(takeUntil(this._destroy)).subscribe(() => {