From 551432ff3b3bbf2088e811d0813ceb7cf0364ba1 Mon Sep 17 00:00:00 2001 From: Alexander Onnikov Date: Tue, 8 Aug 2023 21:18:57 +0700 Subject: [PATCH] UBER-681 Do not select objects when not navigating via keyboard (#3569) Signed-off-by: Alexander Onnikov --- .../components/issues/edit/SubIssueList.svelte | 12 +++++++----- plugins/view-resources/src/actionImpl.ts | 10 ++++++++-- .../view-resources/src/components/Table.svelte | 4 ++-- .../src/components/TableBrowser.svelte | 12 +++++++----- .../src/components/UpDownNavigator.svelte | 2 +- .../src/components/list/List.svelte | 4 ++-- .../src/components/list/ListCategories.svelte | 15 ++++++++++----- .../src/components/list/ListView.svelte | 12 +++++++----- plugins/view-resources/src/selection.ts | 11 ++++++----- 9 files changed, 50 insertions(+), 32 deletions(-) diff --git a/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte b/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte index 873b172bc9..c8885356ba 100644 --- a/plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte +++ b/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) => { - if (dir === 'vertical') { - // Select next - list?.select(offset, of) + const listProvider = new ListSelectionProvider( + (offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection, noScroll?: boolean) => { + if (dir === 'vertical') { + // Select next + list?.select(offset, of, noScroll) + } } - }) + ) let docs: Doc[] = [] function select () { listProvider.update(docs) diff --git a/plugins/view-resources/src/actionImpl.ts b/plugins/view-resources/src/actionImpl.ts index 182a3b3e0f..280eb091b1 100644 --- a/plugins/view-resources/src/actionImpl.ts +++ b/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) { diff --git a/plugins/view-resources/src/components/Table.svelte b/plugins/view-resources/src/components/Table.svelte index 0ef22247d1..76126d3a6b 100644 --- a/plugins/view-resources/src/components/Table.svelte +++ b/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' }) } } diff --git a/plugins/view-resources/src/components/TableBrowser.svelte b/plugins/view-resources/src/components/TableBrowser.svelte index fd8413a6b9..7844e52602 100644 --- a/plugins/view-resources/src/components/TableBrowser.svelte +++ b/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) => { - if (dir === 'vertical') { - // Select next - table?.select(offset, of) + const listProvider = new ListSelectionProvider( + (offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection, noScroll?: boolean) => { + if (dir === 'vertical') { + // Select next + table?.select(offset, of, noScroll) + } } - }) + ) onMount(() => { ;(document.activeElement as HTMLElement)?.blur() diff --git a/plugins/view-resources/src/components/UpDownNavigator.svelte b/plugins/view-resources/src/components/UpDownNavigator.svelte index 02d3fbd5c9..5dbcbccbdd 100644 --- a/plugins/view-resources/src/components/UpDownNavigator.svelte +++ b/plugins/view-resources/src/components/UpDownNavigator.svelte @@ -30,7 +30,7 @@ } } - $: select(undefined, 0, element, 'vertical') + $: select(undefined, 0, element, 'vertical', true) {#if $focusStore.focus !== undefined && $focusStore.provider !== undefined} diff --git a/plugins/view-resources/src/components/list/List.svelte b/plugins/view-resources/src/components/list/List.svelte index d2b25e7860..9968c39834 100644 --- a/plugins/view-resources/src/components/list/List.svelte +++ b/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) } } diff --git a/plugins/view-resources/src/components/list/ListCategories.svelte b/plugins/view-resources/src/components/list/ListCategories.svelte index 48622a1df6..3fce049331 100644 --- a/plugins/view-resources/src/components/list/ListCategories.svelte +++ b/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 { diff --git a/plugins/view-resources/src/components/list/ListView.svelte b/plugins/view-resources/src/components/list/ListView.svelte index 48b8d9dd3e..2481020532 100644 --- a/plugins/view-resources/src/components/list/ListView.svelte +++ b/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) => { - if (dir === 'vertical') { - // Select next - list?.select(offset, of) + const listProvider = new ListSelectionProvider( + (offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection, noScroll?: boolean) => { + if (dir === 'vertical') { + // Select next + list?.select(offset, of, noScroll) + } } - }) + ) onMount(() => { ;(document.activeElement as HTMLElement)?.blur() diff --git a/plugins/view-resources/src/selection.ts b/plugins/view-resources/src/selection.ts index c209c16198..cdcadc3758 100644 --- a/plugins/view-resources/src/selection.ts +++ b/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 { - this.delegate(offset, of, direction) + select (offset: 1 | -1 | 0, of?: Doc, direction?: SelectDirection, noScroll?: boolean): void { + 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 })