Scrolling through a list in Angular using cdk-virtual-scroll-viewport while selecting items via keyboard input

Question

Scrolling through a list in Angular using cdk-virtual-scroll-viewport while selecting items via keyboard input

Looking to implement a customized Autocomplete feature.

As the user begins typing, a small window should appear with selectable options. I want users to have the ability to navigate and select an option using their keyboard.

For instance: - User types "Hou" - Available options are shown as ["House", "Houston"] - User presses the down arrow key on the keyboard and then hits enter to choose "house"

This is my custom scroll component for the pop-up:

<ul class="plDropdown-optionList">
          <cdk-virtual-scroll-viewport style="height: 200px" itemSize="30">
            <ng-container *cdkVirtualFor="let option of displayableOptions">
              <button class="plDropdown-option" type="button" (click)="selectOption(option)">
                {{option}}
              </button>
            </ng-container>
          </cdk-virtual-scroll-viewport>
        </ul>

javascript angular typescript angular-cdk

Answer 1

Answer №1

For those seeking a solution, here is an option that might help.

I implemented a keyboard event using the Input tag:

<input (keydown)="processInput($event)">

This function determines the key pressed:

processInput(evt: KeyboardEvent): void

It keeps track of the selected reference and updates it accordingly:

private _updateIndex(key: string): void {
    switch (key) {
      case Key.ArrowUp:
        if (this.selectedIndex === 0) {
          return;
        }

        this._setIndex(this.selectedIndex -= 1);
        break;

      case Key.ArrowDown:
        this.displayedTags$
        .pipe(
          take(1)
        )
          .subscribe((results) => {
            if (this.selectedIndex >= results.length - 1) {
              this._setIndex(results.length - 1);

              return;
            }

            this._setIndex(this.selectedIndex += 1);
          });
        break;

      default:
        break;
    }
  }

  private _selectIndex(): void {
    this.displayedTags$.pipe(
      take(1)
    )
    .subscribe((results) => {
      const result = results[this.selectedIndex];

      if (result) {
        this.selectResult(result);
      }
    });
  }

  private _setIndex(index: number): void {
    this.selectedIndex = index;
  }

To highlight the current line in your HTML file, include this code snippet:

[ngClass]="{'focus-background': selectedIndex == idx}"

Your HTML will now look like this:

 <cdk-virtual-scroll-viewport style="height: 400px" itemSize="30">
            <ng-container *cdkVirtualFor="let option of displayedTags$ | async; index as idx" (isSelected)="true">
              <button class="plTagsComponent-option" type="button" (click)="selectResult(option)" (isSelected)="true"
                [ngClass]="{'focus-background': selectedIndex == idx}" (mouseenter)="onHover(idx) ">
                {{option.label}}
              </button>
            </ng-container>
          </cdk-virtual-scroll-viewport>

Answer 2

For those seeking a solution, here is an option that might help.

I implemented a keyboard event using the Input tag:

<input (keydown)="processInput($event)">

This function determines the key pressed:

processInput(evt: KeyboardEvent): void

It keeps track of the selected reference and updates it accordingly:

private _updateIndex(key: string): void {
    switch (key) {
      case Key.ArrowUp:
        if (this.selectedIndex === 0) {
          return;
        }

        this._setIndex(this.selectedIndex -= 1);
        break;

      case Key.ArrowDown:
        this.displayedTags$
        .pipe(
          take(1)
        )
          .subscribe((results) => {
            if (this.selectedIndex >= results.length - 1) {
              this._setIndex(results.length - 1);

              return;
            }

            this._setIndex(this.selectedIndex += 1);
          });
        break;

      default:
        break;
    }
  }

  private _selectIndex(): void {
    this.displayedTags$.pipe(
      take(1)
    )
    .subscribe((results) => {
      const result = results[this.selectedIndex];

      if (result) {
        this.selectResult(result);
      }
    });
  }

  private _setIndex(index: number): void {
    this.selectedIndex = index;
  }

To highlight the current line in your HTML file, include this code snippet:

[ngClass]="{'focus-background': selectedIndex == idx}"

Your HTML will now look like this:

 <cdk-virtual-scroll-viewport style="height: 400px" itemSize="30">
            <ng-container *cdkVirtualFor="let option of displayedTags$ | async; index as idx" (isSelected)="true">
              <button class="plTagsComponent-option" type="button" (click)="selectResult(option)" (isSelected)="true"
                [ngClass]="{'focus-background': selectedIndex == idx}" (mouseenter)="onHover(idx) ">
                {{option.label}}
              </button>
            </ng-container>
          </cdk-virtual-scroll-viewport>

Scrolling through a list in Angular using cdk-virtual-scroll-viewport while selecting items via keyboard input

Answer №1

Similar questions

Having trouble with the API authentication call, receiving a "Failed to load resource: net::ERR_CONNECTION_REFUSED" error message

Implementing Observable in NativeScript with TypeScript - A Step-by-Step Guide

Issues with integrating Angular Cypress Component tests with Tailwindcss are causing problems

Load data into data tables through AJAX request

Creating a fantastic Image Gallery in JavaScript

A guide to using jqGrid: Retrieve the value of a particular cell by double clicking on a row

Navigating back to previous page with the help of Authguard

Guide to making a TreeView in Angular 2 with Typescript

Using Next.JS useRouter to access a dynamic route will result in receiving an empty object as the return value

What is the best way to eliminate the # symbol in angular 5 URLs?

Navigate to a specific URL path and send properties as arguments in the function for handling events

Angular 2 and 4 now have a specialized node module designed to create tree-like structures within the framework

Displaying dates on the Amcharts category axis for instances with empty data

suspicion arises that the argument is not correctly referencing the appropriate variables

``motioning a component beneath another component that may be in a state

Encountering a Spring Boot 404 error when deploying static content as a jar file

Guide to easily printing a page in Angular 4 using TypeScript

IIFE and the Twitter share button are a powerful duo

The confirmPasswordReset function in Angularfire auth is not defined in the User type

What is the proper way to delete a callback from a promise object created by $q.defer() in AngularJS?