Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mac1253 opened this issue Aug 17, 2022 · 1 comment
Open

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

mac1253 opened this issue Aug 17, 2022 · 1 comment

Comments

@mac1253
Copy link

mac1253 commented Aug 17, 2022

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
Copy link
Owner

Nolanus commented Oct 6, 2022

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants