search

MurhafSousli / ngx-scrollbar

Custom overlay-scrollbars with native scrolling mechanism
https://ngx-scrollbar.netlify.app/
MIT License
618 stars 99 forks source link

Unable to scroll using keyboard arrows inside a dialog #473

Closed Abdulrrahman closed 1 year ago

Abdulrrahman commented 1 year ago

Reproduction

stackblitz: https://stackblitz.com/edit/angular-sblvne?file=src/main.ts

Steps to reproduce:

  1. place scroll inside dialog
  2. use keyboard arrows no scroll (native scroll works just fine)

Expected Behavior

What behavior were you expecting to see? to be able to scroll using keyboard

Actual Behavior

What behavior did you actually see? stuck

Environment

MurhafSousli commented 1 year ago

It happened because you put the scrollable <ul> element outside ng-scrollbar component

Here is a fixed stackblitz

Use

  <ng-scrollbar style="height: 100px">
    <ul tabindex="0">
      <li><span>&#10003;</span> Panda</li>
      <li><span>&#10003;</span> Unicorn</li>
      <li><span>&#10003;</span> Lion</li>
      <li><span>&#10003;</span> Panda</li>
      <li><span>&#10003;</span> Unicorn</li>
      <li><span>&#10003;</span> Lion</li>
      <li><span>&#10003;</span> Panda</li>
      <li><span>&#10003;</span> Unicorn</li>
      <li><span>&#10003;</span> Lion</li>
    </ul>
  </ng-scrollbar>

Or

  <ng-scrollbar style="height: 100px">
    <ul scrollViewport tabindex="0">
      <li><span>&#10003;</span> Panda</li>
      <li><span>&#10003;</span> Unicorn</li>
      <li><span>&#10003;</span> Lion</li>
      <li><span>&#10003;</span> Panda</li>
      <li><span>&#10003;</span> Unicorn</li>
      <li><span>&#10003;</span> Lion</li>
      <li><span>&#10003;</span> Panda</li>
      <li><span>&#10003;</span> Unicorn</li>
      <li><span>&#10003;</span> Lion</li>
    </ul>
  </ng-scrollbar>
Abdulrrahman commented 1 year ago

thanks for your help I fixed the problem, however I still have the same issue with material mat select options the scroll doesn't follow the active option with keyboard

https://stackblitz.com/edit/angular-zerpvf?file=src/app/select-custom-trigger-example.ts

MurhafSousli commented 1 year ago

Your stackblitz didn't work!

Abdulrrahman commented 1 year ago

Your stackblitz didn't work!

it should be working right now

MurhafSousli commented 1 year ago

This one is difficult, I have no idea!