Nolanus / ngx-page-scroll

Animated scrolling functionality for angular written in pure typescript
https://nolanus.github.io/ngx-page-scroll/
MIT License
476 stars 107 forks source link

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

Open mac1253 opened 2 years ago

mac1253 commented 2 years ago

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);
    }
Nolanus commented 1 year ago

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?