Focus changes files when navigating to Changes tab

Fixes #103

Author: pol-rivero

app/src/ui/changes/filter-changes-list.tsx

@@ -318,7 +318,6 @@ export class FilterChangesList extends React.Component<
 > {
   private filterTextBox: TextBox | undefined = undefined
   private headerRef = createObservableRef<HTMLDivElement>()
-  private filterOptionsButtonRef: HTMLButtonElement | null = null
   private includeAllCheckBoxRef = React.createRef<Checkbox>()
   private filterListRef =
     React.createRef<AugmentedSectionFilterList<IChangesListItem>>()
@@ -1290,12 +1289,7 @@ export class FilterChangesList extends React.Component<
   }
 
   public focus() {
-    if (this.props.showChangesFilter) {
-      this.filterOptionsButtonRef?.focus()
-      return
-    }
-
-    this.includeAllCheckBoxRef.current?.focus()
+    this.filterListRef.current?.focus()
   }
 
   private onChangedFileClick = (

app/src/ui/lib/augmented-filter-list.tsx

@@ -402,6 +402,10 @@ export class AugmentedSectionFilterList<
     )
   }
 
+  public focus() {
+    this.list?.focus()
+  }
+
   public selectNextItem(
     focus: boolean = false,
     inDirection: SelectionDirection = 'down'

app/src/ui/lib/list/section-list.tsx

@@ -1768,7 +1768,18 @@ export class SectionList extends React.Component<
       lastSelectedRow !== undefined &&
       isValidRow(lastSelectedRow, rowCount)
     ) {
-      this.scrollRowToVisible(lastSelectedRow)
+      const rowElement = this.rowRefs.get(lastSelectedRow)
+      if (rowElement !== undefined) {
+        this.focusRow = lastSelectedRow
+        rowElement.focus({ preventScroll: true })
+      } else {
+        // Selected row is not yet materialized in the DOM (virtualized away).
+        // Fall back to the first row to avoid a no-focus state.
+        const firstRow: RowIndexPath = { section: 0, row: 0 }
+        if (isValidRow(firstRow, rowCount)) {
+          this.scrollRowToVisible(firstRow)
+        }
+      }
     } else {
       // TODO: decide which grid to focus
       // if (this.grid) {

app/src/ui/repository.tsx

@@ -852,6 +852,10 @@ export class RepositoryView extends React.Component<
       this.props.repository,
       section
     )
+
+    if (section === RepositorySectionTab.Changes) {
+      this.focusChangesNeeded = true
+    }
   }
 
   private onTabClicked = (tab: Tab) => {
@@ -861,6 +865,9 @@ export class RepositoryView extends React.Component<
       this.props.repository,
       section
     )
+    if (section === RepositorySectionTab.Changes) {
+      this.focusChangesNeeded = true
+    }
     if (!!section) {
       this.props.dispatcher.updateCompareForm(this.props.repository, {
         filterText: '',