UBER-681 Do not select objects when not navigating via keyboard (#3569)

Signed-off-by: Alexander Onnikov <alexander.onnikov@xored.com>

plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte

@@ -36,12 +36,14 @@
 
   let list: List
 
-  const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
+  const listProvider = new ListSelectionProvider(
+    (offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection, noScroll?: boolean) => {
       if (dir === 'vertical') {
         // Select next
-      list?.select(offset, of)
+        list?.select(offset, of, noScroll)
       }
-  })
+    }
+  )
   let docs: Doc[] = []
   function select () {
     listProvider.update(docs)

plugins/view-resources/src/actionImpl.ts

@@ -107,10 +107,16 @@ contextStore.subscribe((it) => {
   $contextStore = it
 })
 
-export function select (evt: Event | undefined, offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection): void {
+export function select (
+  evt: Event | undefined,
+  offset: 1 | -1 | 0,
+  of?: Doc,
+  direction?: SelectDirection,
+  noScroll?: boolean
+): void {
   closeTooltip()
   if ($focusStore.provider?.select !== undefined) {
-    $focusStore.provider?.select(offset, of, direction)
+    $focusStore.provider?.select(offset, of, direction, noScroll)
     evt?.preventDefault()
     previewDocument.update((old) => {
       if (old !== undefined) {

plugins/view-resources/src/components/Table.svelte

@@ -170,7 +170,7 @@
     dispatch('row-focus', object)
   }
 
-  export function select (offset: 1 | -1 | 0, of?: Doc): void {
+  export function select (offset: 1 | -1 | 0, of?: Doc, noScroll?: boolean): void {
     let pos = (of !== undefined ? objects.findIndex((it) => it._id === of._id) : selection) ?? -1
     pos += offset
     if (pos < 0) {
@@ -182,7 +182,7 @@
     const r = refs[pos]
     selection = pos
     onRow(objects[pos])
-    if (r !== undefined) {
+    if (r !== undefined && !noScroll) {
       r?.scrollIntoView({ behavior: 'auto', block: 'nearest' })
     }
   }

plugins/view-resources/src/components/TableBrowser.svelte

@@ -40,12 +40,14 @@
   export let loadingProps: LoadingProps | undefined = undefined
 
   let table: Table
-  const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
+  const listProvider = new ListSelectionProvider(
+    (offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection, noScroll?: boolean) => {
       if (dir === 'vertical') {
         // Select next
-      table?.select(offset, of)
+        table?.select(offset, of, noScroll)
       }
-  })
+    }
+  )
 
   onMount(() => {
     ;(document.activeElement as HTMLElement)?.blur()

plugins/view-resources/src/components/UpDownNavigator.svelte

@@ -30,7 +30,7 @@
     }
   }
 
-  $: select(undefined, 0, element, 'vertical')
+  $: select(undefined, 0, element, 'vertical', true)
 </script>
 
 {#if $focusStore.focus !== undefined && $focusStore.provider !== undefined}

plugins/view-resources/src/components/list/List.svelte

@@ -98,9 +98,9 @@
     selectedObjectIds = []
   }
 
-  export function select (offset: 2 | -2 | 1 | -1 | 0, of?: Doc): void {
+  export function select (offset: 2 | -2 | 1 | -1 | 0, of?: Doc, noScroll?: boolean): void {
     if (of !== undefined || offset !== 0) {
-      listCategories?.select(offset, of)
+      listCategories?.select(offset, of, undefined, noScroll)
     }
   }
 

plugins/view-resources/src/components/list/ListCategories.svelte

@@ -188,7 +188,12 @@
     return -1
   }
 
-  export function select (offset: 2 | 1 | -2 | -1 | 0, of?: Doc, dir?: 'vertical' | 'horizontal'): void {
+  export function select (
+    offset: 2 | 1 | -2 | -1 | 0,
+    of?: Doc,
+    dir?: 'vertical' | 'horizontal',
+    noScroll?: boolean
+  ): void {
     let pos = (of != null ? docs.findIndex((it) => it._id === of._id) : selection) ?? -1
     if (pos === -1) {
       for (const st of categories) {
@@ -276,7 +281,7 @@
           } else {
             const obj = stateObjs[statePos - 1]
             if (obj !== undefined) {
-              scrollInto(objState, obj)
+              if (!noScroll) scrollInto(objState, obj)
               dispatch('row-focus', obj)
             }
           }
@@ -296,7 +301,7 @@
           } else {
             const obj = stateObjs[statePos + 1]
             if (obj !== undefined) {
-              scrollInto(objState, obj)
+              if (!noScroll) scrollInto(objState, obj)
               dispatch('row-focus', obj)
             }
           }
@@ -304,11 +309,11 @@
         }
       }
       if (offset === 0) {
-        scrollInto(objState, obj)
+        if (!noScroll) scrollInto(objState, obj)
         dispatch('row-focus', obj)
       }
     } else {
-      listCategory[objState]?.select(offset, of, dir)
+      listCategory[objState]?.select(offset, of, dir, noScroll)
     }
   }
   function scrollInto (statePos: number, obj: Doc): void {

plugins/view-resources/src/components/list/ListView.svelte

@@ -29,12 +29,14 @@
   let divScroll: HTMLDivElement
   let listWidth: number
 
-  const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
+  const listProvider = new ListSelectionProvider(
+    (offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection, noScroll?: boolean) => {
       if (dir === 'vertical') {
         // Select next
-      list?.select(offset, of)
+        list?.select(offset, of, noScroll)
       }
-  })
+    }
+  )
 
   onMount(() => {
     ;(document.activeElement as HTMLElement)?.blur()

plugins/view-resources/src/selection.ts

@@ -16,7 +16,7 @@ export interface SelectionFocusProvider {
   // * If vertical, next will return item under.
   // * If horizontal, next will return item on right.
   // of - document offset from we requesting.
-  select?: (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection) => void
+  select?: (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection, noScroll?: boolean) => void
 
   // Update documents content
   update: (docs: Doc[]) => void
@@ -110,7 +110,7 @@ export class ListSelectionProvider implements SelectionFocusProvider {
   _current?: FocusSelection
   private readonly unsubscribe: Unsubscriber
   constructor (
-    private readonly delegate: (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection) => void,
+    private readonly delegate: (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection, noScroll?: boolean) => void,
     autoDestroy = true
   ) {
     this.unsubscribe = focusStore.subscribe((doc) => {
@@ -154,10 +154,11 @@ export class ListSelectionProvider implements SelectionFocusProvider {
     this.unsubscribe()
   }
 
-  select (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection): void {
+  select (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection, noScroll?: boolean): void {
-    this.delegate(offset, of, direction)
+    this.delegate(offset, of, direction, noScroll)
   }
 
+  // this is the main method that is called when docs are updated
   update (docs: Doc[]): void {
     this._docs = docs
 
@@ -171,7 +172,7 @@ export class ListSelectionProvider implements SelectionFocusProvider {
         this.delegate(0, undefined, 'vertical')
       } else {
         // Check if we don't have object, we need to select first one.
-        this.delegate(0, this._current?.focus, 'vertical')
+        this.delegate(0, this._current?.focus, 'vertical', true)
       }
       if (this._current?.focus === undefined) {
         updateFocus({ focus: this._current?.focus, provider: this })