bug(cdkListbox): active item is not scrolled into viewport when `useActiveDescendant` is true

[alirezamirian]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When useActiveDescendant is true, the active option won't stay in the view, if the listbox is scrollable. It can happen both when an option is selected initially, and when the user uses arrow keys to navigate the options.
It should be related to the fact that in active descendant mode, listbox option elements won't be focused physically, so they are not automatically scrolled into view.

Reproduction

StackBlitz link: https://stackblitz.com/edit/q47nzr?file=src%2Fexample%2Fcdk-listbox-activedescendant-example.ts
Steps to reproduce:

1. Focus the listbox, e.g. by clicking on one of the items
2. start navigating with arrow keys. The active item goes out of the view

Expected Behavior

Listbox should scroll to keep the active option within the view, regardless of the value of useActiveDescendant.

Actual Behavior

Listbox doesn't scroll to keep the active option within the view, when useActiveDescendant is true.

Environment

@angular-devkit/architect 0.1703.0
@angular-devkit/build-angular 17.3.0
@angular-devkit/core 17.3.0
@angular-devkit/schematics 17.3.0
@angular/cdk 17.3.6
@angular/material 17.3.6
@angular/material-experimental 17.3.6
@angular/material-moment-adapter 17.3.6
@schematics/angular 17.3.0
rxjs 7.4.0
typescript 5.4.2
zone.js 0.14.0

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