Navigating the changed files sidebar with keyboard down-arrow loses focus if scrolling is required

[jstanden]

Description

If you have enough changed files in your repository to have a scrollbar in the "Changed files" viewport on the left, you can no longer navigate the entire list of changes using only the keyboard arrows.

Once you reach a point where the list requires scrolling, the focus is stolen from the changed files and refocuses on the scrollbar itself. Subsequent up/down arrow keystrokes now only scroll the viewport, and do not select changed files nor show their diffs.

You have to press TAB, or click on a file with the mouse, to regain focus.

This just changed in the 1.6.2 update.

Version

• GitHub Desktop: 1.6.2

• Operating system: macOS 10.14

Steps to Reproduce

1. Open a repository with enough changed files to require scrolling in the file list viewport on the left. Alternatively, resize the GitHub Desktop height to force scrolling with fewer files.

2. Click on the first changed file on the left.

3. Press Down Arrow on the keyboard enough times to reach the bottom of the viewport and require scrolling.

Expected Behavior

The viewport should scroll without the current file/diff losing focus. Continuing to press Down Arrow should navigate through the remaining files.

Actual Behavior

Focus is stolen by the scrollbar itself. The keyboard arrow keys now only scroll the viewport and no longer navigate the list of files.

Additional Information

[outofambit]

Hi @jstanden I'm sorry you're hitting this. Thank you for filing such a detailed report! This is clearly a regression.

Also going to mark this as help wanted in case someone wants to do some more diagnostics on why and how this regressed. (May be related to changes we made in #6481.) Thanks!

[Daniel-McCarthy]

@outofambit

(May be related to changes we made in #6481.)

This seems to be the case. I tried rolling back this set of changes to see if the issue could still be reproduced and I could not.

I have noticed that if you select a row in the list so that it is highlighted and in focus, then scroll so that it is no longer on screen, and scroll back, it will no longer be in focus despite still being the selection. I think something similar to this is occurring when using the arrow key to select a row that is off view.

Combined with scrollTop being set directly as a prop it seems to be manifesting in this issue. I think a solution would be to either find a way to only set the scrollTop when it is needed (when switching between the History and Changes tabs). Or perhaps the stored scrollTop value needs to be updated when the arrow key is used to select a new row that results in changing the current scroll position.

Any ideas on how to go about the prior would certainly be appreciated. I will continue looking into this in the mean time.

[tierninho]

This also applies to the History list. Scrolling gets eventually gets stuck if you hold down either the up or down key. Note: I had a long History list when this was seen.

[varkor]

The selected file is blurred even if you scroll the list with the mousewheel, so this is not specific to using the arrow keys in particular (it's just more noticable).