Closed mmarzullotv closed 3 weeks ago
It seems that it may be an issue with the list? i just can't find why this is happening.
Here's another example: https://codesandbox.io/s/2w8wmlm89p
And you don't even need a focusable element for this, just click on the grid, start pressing the arrow keys to any direction, go fast and eventually, the whole focus from the scrollable container will disappear, it falls back to body.
At first i thought that could be a rendering time problem where if you go fast enough, it wouldn't let the elements to render and so an unfocus would be produced. So in my item list whenever i move up/down I make the list scroll to center that item specifically. But unfortunately, it didn't work. At some point the focus keeps going out of the container.
Any idea of what I can do to achieve this?
The way the virtual list works is that it only keeps in the DOM the items that are visible on screen. So what happens in your case is that you have the focus on an element that gets removed from the DOM when scrolling down.
@zhouzi exactly that's what's happening.
I would expect some callback so I can do something if the focus is blurred. Right now it is an accessibility issue because I can't get back to current focused item when scroll happens.
EDIT: I need to double check but the screenreader might also be an issue, I think it will announce that body is focused.
Just checking if this was automation moving it to close or if there was a decision to not do this.
Hey guys, I got a Virtualized List that I want to add accessibility onto it, so by pressing the arrow keys you would move through the items up and down, for this, i need to focus on each of the items, but when I reach a certain point I lose the focus.
I just checked that in the official demo codepen: https://codesandbox.io/s/xenodochial-cdn-lnlw8t?file=/src/App.js
I added some inputs in there as a replacement but the idea is the same, check that if you have focused on any input, after scrolling a bit, and going back up, you will see the focus is no longer active on the element it's supposed to.
Do you have any idea on how to solve/fix this?