Issue with cdk-virtual-scroll-viewport: Scroll function malfunctioning when using navigation up/down button

While utilizing cdk-virtual-scroll-viewport within my mat-autocomplete, I have noticed that scrolling works perfectly when using the mouse but does not function properly when pressing the keydown button.

Expected Behavior: The list should automatically scroll up or down if the focus moves beyond the visible viewport.

Actual Behavior: Unfortunately, the scroll feature does not work as intended. When the end of the rendered items is reached, it cycles back to the beginning without displaying new items.

For reference, please see this link: https://stackblitz.com/edit/angular-5rmvpq

htmlcssangularkeyboard-eventsangular-cdk-virtual-scroll

Answer №1

import { Component, ViewChild, ElementRef } from '@angular/core';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';

@Component({
  selector: 'my-component',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class MyComponent {
  items: string[] = [];

  @ViewChild(CdkVirtualScrollViewport, {static: false}) viewport: CdkVirtualScrollViewport;
  @ViewChild('autocompleteInput') autocompleteInput: ElementRef;

  constructor() {
    for (let i = 0; i < 100; i++) {
      this.items.push("#" + i);
    }
  }

  onPanelOpened() {
    if (this.viewport && this.autocompleteInput) {
      const activeItemIndex = this.items.indexOf(this.autocompleteInput.nativeElement.value);
      if (activeItemIndex !== -1) {
        this.viewport.scrollToIndex(activeItemIndex);
      }
    }
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing two different types of tests with Angular CLI can be done by utilizing the `ng test

My testing setup includes two distinct types of tests: Unit tests (created as standard angular cli .spec.ts files) Functional tests (developed as my specific .func.spec.ts files, following the same structure as .spec.ts files but interacting with real da ...

angularangular-cli

What is the best way to hide the MatSlidePanel?

There is a side panel in my application that I need to close upon user action. I am facing an issue with the following error message: Property 'close' does not exist on type 'MatSlidePanel'.ts(2339) Below is the code snippet I attempte ...

jqueryangular

Identifying the right time to apply CSS coding techniques

Currently, I am customizing a CSS file in a WordPress theme setup. Throughout the CSS code, there are instances where I need to designate something as '.example', sometimes as '#example', and occasionally it can just remain 'examp ...

csswordpressclasshtmlrules

Tips for testing an Angular Service that utilizes AngularFireDatabase by utilizing Jasmine Spy/Mock

I am currently testing my data service, and while I can successfully test it using real services like AngularFireDatabase, I am facing issues with getting the mocked version to work for testing purposes. The DataStorage class in use is designed to combine ...

angulartestingjasmineangularfire

Deactivate options in the dropdown selection

Is there a way to disable specific values in a dropdown list? While exploring a solution here, I discovered that adding a disabled style to <a> should disable the element. However, when I tried this method on dropdown element B, it did not work as e ...

htmlangularjsdrop-down-menuangular-ui-bootstrapdropdown

Tips for sorting items in Wordpress with JavaScript / on click?

I am currently utilizing a method similar to the one outlined in this resource from w3 schools for filtering elements within divs. However, I am facing challenges when attempting to integrate this script into my Aurora Wordpress site due to the removal of ...

javascripthtmlcsswordpress

"Pressing the 'back' button on your browser takes

Is there a way to navigate back to the main page by clicking on an image? After selecting First, Picture1 will be shown. How can I go back to the selection page for further choices? <a href="picture1.jpg"> <h3>First</h3></a> <a ...

javascripthtmlcss

Utilizing the power of Web SQL Database with a dynamic Javascript loop

I'm currently facing a challenge that I could use some help with... While experimenting with Web SQL Databases, I've encountered an issue when trying to create a loop that functions correctly. Here's the code snippet I'm using: for ...

javascriptsqlhtmlloopsweb-sql

Burger on a website designed for desktop users

In my project, I am looking to only display a hamburger icon with a list of items on mobile view. I do not want any menu items in the navbar on desktop and tablet views. Is there a way to achieve this using Bootstrap or another method? Any suggestions for ...

htmlcsstwitter-bootstrapbootstrap-4hamburger-menu

Tips for ensuring a flexbox stays within the bounds of its container and doesn't exceed the available space

I am in the process of developing a modal that needs to be centered on my page and expand organically, but only up to a specific width and height limit. Using flexbox, I have successfully centered this modal (.modal) on the page. Within the modal, there ...

htmlcssflexbox

Ways to arrange buttons vertically so they are perfectly aligned beneath one another

I'm trying to align a set of buttons, each containing an information icon, vertically under each other. The current alignment can be seen in image_1 below. Can someone please provide me with guidance on how to achieve this using CSS and HTML? I was t ...

htmlcss

Ways to resolve the issue of forms causing button overlap

I've implemented the following code in my project: <div class="table-responsive"> <table class="table align-items-center table-flush"> <thead class="thead-light"> <tr> ...

htmlcsslaravellaravel-blade

Angular 4 NgFor Finish Event

After completion of the *ngFor, I need to trigger my custom function. Specifically, when all the tr elements are completed, I want to execute the following function: $('#myTable').dataTables(options); Here is a snippet of MyCode: <tbody> ...

javascriptangularngfor

Modify the size of images while shuffling using Javascript

Hey there! I've got some bootstrap thumbnails set up and I'm using a script to shuffle the images inside the thumbnails or a element within the li. It's working fine, but some of the images are coming out larger or smaller than others. I&apo ...

javascripthtmltwitter-bootstrap

An issue with Destination-Out Composition in HTML5 Canvas

While working on a canvas, I have encountered an issue with deleting a portion of a curve I have drawn. Specifically, I need to remove the last 25% of the curve after it is complete and keep only the first 75%. However, when attempting to delete the lines ...

htmlcanvasdrawing

Using jQuery to apply a background image in CSS

Currently, I am attempting to utilize jQuery to set a background image for an HTML element. <div class="rmz-srchbg"> <input type="text" id="globalsearchstr" name="search" value="" class="rmz-txtbox"> <input type="submit" value="& ...

javascriptjqueryhtmlcss

Adjust the image size in the jumbotron to fit perfectly without the need for scrolling

I'm in the process of creating a website with a prominent jumbotron section on the landing page. I am looking to adjust the height of the image within the jumbotron without cutting off any parts of the picture, and I do not want it to scroll to displa ...

htmlcssbootstrap-4

Positioning Bootstrap table in the middle of the screen

I need help figuring out how to keep my bootstrap table centered in the middle of the page, instead of adjusting based on the tab selected within a bootstrap nav tab. Currently, it centers around the active tab, but I want it to stay in the middle no matte ...

htmlcssbootstrap-5

Looking to display a div with both a plus and minus icon? Having trouble getting a div to show with left margin? Need assistance hiding or showing div text

Can someone please review this source code? Here is the demo link: http://jsfiddle.net/bala2024/nvR2S/40/ $('.expand').click(function(){ $(this).stop().animate({ width:'73%', height:'130px' }); $( ...

javascriptjqueryhtmlcss

Creating custom web components with routing in Angular 6

Is it possible to create an Angular WebComponent or Custom Element with routing modules in Angular 6? I have successfully created a web component with atomic components and now I want to expand it to have multiple screens using the routing module. Here ar ...

angularweb-component