search

bvaughn / react-window

React components for efficiently rendering large lists and tabular data
https://react-window.now.sh/
MIT License
15.72k stars 782 forks source link

After scrolling if you have any focused element in the list, it will lose focus #650

Closed mmarzullotv closed 3 weeks ago

mmarzullotv commented 2 years ago

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?

mmarzullotv commented 2 years 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?

zhouzi commented 2 years ago

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.

mmarzullotv commented 2 years ago

@zhouzi exactly that's what's happening.

tounsoo commented 1 year ago

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.

tounsoo commented 3 weeks ago

Just checking if this was automation moving it to close or if there was a decision to not do this.