From aae74b031b23520440b6556ac89391303cc8894b Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 12 Sep 2024 17:52:34 +0200
Subject: [PATCH] fix(cdk/listbox): scroll active option into view when using
 aria-activedescendant (#29722)

When the CDK listbox has `useActiveDescendant` enabled, it won't focus the individual options so they won't be scrolled into the view automatically. This change adds a manual call to scroll them in instead.

Fixes #28989.

(cherry picked from commit fd4085895e67a695a4fbb5d3da2db9271f35a4e6)
---
 src/cdk/listbox/listbox.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/cdk/listbox/listbox.ts b/src/cdk/listbox/listbox.ts
index 213d1f31adef..412aa6dfb851 100644
--- a/src/cdk/listbox/listbox.ts
+++ b/src/cdk/listbox/listbox.ts
@@ -194,7 +194,13 @@ export class CdkOption<T = unknown> implements ListKeyManagerOption, Highlightab
    * No-op implemented as a part of `Highlightable`.
    * @docs-private
    */
-  setActiveStyles() {}
+  setActiveStyles() {
+    // If the listbox is using `aria-activedescendant` the option won't have focus so the
+    // browser won't scroll them into view automatically so we need to do it ourselves.
+    if (this.listbox.useActiveDescendant) {
+      this.element.scrollIntoView({block: 'nearest', inline: 'nearest'});
+    }
+  }
 
   /**
    * No-op implemented as a part of `Highlightable`.