Method _setUpFocusManagement

src/material/chips/chip-set.ts:228–258

Sets up the chip set's focus management logic.

()

  /** Sets up the chip set's focus management logic. */
  private _setUpFocusManagement() {
    // Create a flat `QueryList` containing the actions of all of the chips.
    // This allows us to navigate both within the chip and move to the next/previous
    // one using the existing `ListKeyManager`.
    this._chips.changes.pipe(startWith(this._chips)).subscribe((chips: QueryList<MatChip>) => {
      const actions: MatChipAction[] = [];
      chips.forEach(chip => chip._getActions().forEach(action => actions.push(action)));
      this._chipActions.reset(actions);
      this._chipActions.notifyOnChanges();
    });

    this._keyManager = new FocusKeyManager(this._chipActions)
      .withVerticalOrientation()
      .withHorizontalOrientation(this._dir ? this._dir.value : 'ltr')
      .withHomeAndEnd()
      .skipPredicate(action => this._skipPredicate(action));

    // Keep the manager active index in sync so that navigation picks
    // up from the current chip if the user clicks into the list directly.
    this.chipFocusChanges.pipe(takeUntil(this._destroyed)).subscribe(({chip}) => {
      const action = chip._getSourceAction(document.activeElement as Element);

      if (action) {
        this._keyManager.updateActiveItem(action);
      }
    });

    this._dir?.change
      .pipe(takeUntil(this._destroyed))
      .subscribe(direction => this._keyManager.withHorizontalOrientation(direction));
  }

  /**
   * Determines if key manager should avoid putting a given chip action in the tab index. Skip