feat(listbox): added additional focus management logic and a getSelectedValues function.

Author: nielsr98

src/cdk-experimental/listbox/listbox.spec.ts

@@ -659,6 +659,11 @@ describe('CdkOption and CdkListbox', () => {
       listboxInstance.writeValue(['arc', 'stasis']);
       fixture.detectChanges();
 
+      const selectedValues = listboxInstance.getSelectedValues();
+      expect(selectedValues.length).toBe(2);
+      expect(selectedValues[0]).toBe('arc');
+      expect(selectedValues[1]).toBe('stasis');
+
       expect(optionElements[0].hasAttribute('aria-selected')).toBeFalse();
       expect(optionElements[1].hasAttribute('aria-selected')).toBeFalse();
 

src/cdk-experimental/listbox/listbox.ts

@@ -176,6 +176,10 @@ export class CdkOption<T = unknown> implements ListKeyManagerOption, Highlightab
     }
   }
 
+  getElementRef() {
+    return this._elementRef;
+  }
+
   /** Sets the active property to true to enable the active css class. */
   setActiveStyles() {
     this._active = true;
@@ -273,6 +277,7 @@ export class CdkListbox<T> implements AfterContentInit, OnDestroy, OnInit, Contr
   @Input('parentPanel') private readonly _explicitPanel: CdkComboboxPanel;
 
   constructor(
+      private readonly _elementRef: ElementRef,
       @Optional() @Inject(PANEL) readonly _parentPanel?: CdkComboboxPanel<T>,
   ) { }
 
@@ -422,6 +427,10 @@ export class CdkListbox<T> implements AfterContentInit, OnDestroy, OnInit, Contr
 
     if (!this.useActiveDescendant) {
       this._activeOption.focus();
+    } else {
+      if (document.activeElement === this._activeOption.getElementRef().nativeElement) {
+        this._elementRef.nativeElement.focus();
+      }
     }
   }
 
@@ -459,6 +468,7 @@ export class CdkListbox<T> implements AfterContentInit, OnDestroy, OnInit, Contr
   /** Updates the key manager's active item to the given option. */
   setActiveOption(option: CdkOption<T>) {
     this._listKeyManager.updateActiveItem(option);
+    this._updateActiveOption();
   }
 
   /**
@@ -489,6 +499,11 @@ export class CdkListbox<T> implements AfterContentInit, OnDestroy, OnInit, Contr
     this.disabled = isDisabled;
   }
 
+  /** Returns the values of the currently selected options. */
+  getSelectedValues(): T[] {
+    return this._options.filter(option => option.selected).map(option => option.value);
+  }
+
   /** Selects an option that has the corresponding given value. */
   private _setSelectionByValue(values: T | T[]) {
     for (const option of this._options.toArray()) {