ngx-page-scroll icon indicating copy to clipboard operation
ngx-page-scroll copied to clipboard

PageScroll directive doesn't watch for keyup/keydown on a tag

Open mac1253 opened this issue 2 years ago • 1 comments

Shouldn't the PageScroll directive listen to keyup/keydown for when a user might press the enter key to scroll? Our use case is a dynamic list of links, anchor tags, that need to be tabbable and scrolled to when enter is pressed. Its for accessibility . I've tried the scroll service though I get no errors and it doesn't work. Any thoughts?

<!--Floating nav-->
<ng-container *ngFor="let link of links">
        <a pageScroll
           tabindex="0"
           (keyup.enter)="scollOnEnter('#' + link.id)"
           [pageScrollOffset]="0"
           [pageScrollDuration]="300"
           [href]="'#' + link.id">
            {{link}}
        </a>
</ng-container>

<div class="wrapper">
    <mat-card>
        <div #targetElement *ngFor=" let car of cars">

        </div>
    </mat-card>
</div>

And my component

@ViewChild('targetElement')
   public targetElement: ElementRef;

   public scollOnEnter(target) {
       const pageScrollInstance: PageScrollInstance = this.pageScrollService.create({
           document: this.document,
           scrollTarget: target,
           advancedInlineOffsetCalculation: true,
           scrollViews: [this.targetElement.nativeElement]
       });

       this.pageScrollService.start(pageScrollInstance);
   }

mac1253 avatar Aug 17 '22 18:08 mac1253

Hi @mac1253, the directive listenes for the click event at the attached object: https://github.com/Nolanus/ngx-page-scroll/blob/master/projects/ngx-page-scroll/src/lib/ngx-page-scroll.directive.ts#L23

But I do agree that it is better from a usability perspective to also handle key-events makes sense. I'll out that on the feature list to be added in on of the next releases.

The shown code looks ok. Can you reproduce the problem in a plunkr for me?

Nolanus avatar Oct 06 '22 18:10 Nolanus