Skip to content

Commit

Permalink
fix(cdk/listbox): scroll active option into view when using aria-acti…
Browse files Browse the repository at this point in the history
…vedescendant (#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.
  • Loading branch information
crisbeto authored Sep 12, 2024
1 parent 3d272e1 commit fd40858
Showing 1 changed file with 7 additions and 1 deletion.
8 changes: 7 additions & 1 deletion src/cdk/listbox/listbox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand Down

0 comments on commit fd40858

Please sign in to comment.