Skip to content

Commit aae74b0

Browse files
committed
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 fd40858)
1 parent 95d680a commit aae74b0

File tree

1 file changed

+7
-1
lines changed

1 file changed

+7
-1
lines changed

src/cdk/listbox/listbox.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,13 @@ export class CdkOption<T = unknown> implements ListKeyManagerOption, Highlightab
194194
* No-op implemented as a part of `Highlightable`.
195195
* @docs-private
196196
*/
197-
setActiveStyles() {}
197+
setActiveStyles() {
198+
// If the listbox is using `aria-activedescendant` the option won't have focus so the
199+
// browser won't scroll them into view automatically so we need to do it ourselves.
200+
if (this.listbox.useActiveDescendant) {
201+
this.element.scrollIntoView({block: 'nearest', inline: 'nearest'});
202+
}
203+
}
198204

199205
/**
200206
* No-op implemented as a part of `Highlightable`.

0 commit comments

Comments
 (0)