Fix issue that the container loses focus after pageup or pagedown key press

[CrendKing]

I experience the issue in Video Hub App, which uses ngx-virtual-scroller. After some searches, found a workaround PapaNappa posted years ago: https://github.com/rintoj/ngx-virtual-scroller/issues/213#issuecomment-425849817. The minimum required change to fix the problem in Video Hub App is just adding tabindex attribute. Not tested in any other use cases.

There are so many reports about this issue (e.g. https://github.com/rintoj/ngx-virtual-scroller/issues/144, https://github.com/rintoj/ngx-virtual-scroller/issues/213, https://github.com/rintoj/ngx-virtual-scroller/issues/425, https://github.com/whyboris/Video-Hub-App/issues/645, https://github.com/whyboris/Video-Hub-App/issues/646). Why is there no investigation or effort trying to properly identify and fix the problem? It's not like this is rare case and hard to reproduce. Literally, just open Video Hub App with some videos and you can repro.

[whyboris]

Thank you for the pull request! I will try to confirm this fix and merge it in 👍 🤝 in 2 weeks 😅 I'm away for a bit.

[CrendKing]

Thank you!

While this fixes the key press problem, I notice two changes in Video Hub App:

1. Once the gallery gain focus, it now has a orange border around it, like how a textarea in browser looks like when it has focus. But a outline: none; to the scroller container .gallery-container CSS fixes this.
2. In VHA, user could show some sliders to do filtering, such as duration of the video. Previously, both the slider handle, text and gallery content would refresh as I use the slider. Now the slider seems completely stuck when I slide, but will suddenly update if I hover on the gallery. I think this is probably because VHA has some code to manually fresh content upon certain event, but now those event no longer triggers?

So this fix might not be perfect, but I encourage you guys start an investigation on this. Hopefully we can find a complete solution.

---

EDIT: It looks like the issue 2 was caused by the Electron 12 upgrade in VHA, not this change.

Also, alternatively, instead of changing this repo, consumer side (such as VHA) can do this instead:

<virtual-scroller [attr.tabindex]="-1" ... >

[whyboris]

👀 we should still take a look into whether this addresses the problem.

I'm reopening the PR and will check this winter when I finally get back to VHA development 😅

ps - I'm eager, once I find the time, to update this repository to the newest Angular version 🤞