diff --git a/packages/web/src/elements/SearchInput.svelte b/packages/web/src/elements/SearchInput.svelte index 94524bf76..0606ad449 100644 --- a/packages/web/src/elements/SearchInput.svelte +++ b/packages/web/src/elements/SearchInput.svelte @@ -7,6 +7,7 @@ $: searchValue = value || ''; export let isDebounced = false; + export let onFocusFilteredList = null; let domInput; @@ -14,9 +15,17 @@ if (e.keyCode == keycodes.escape) { value = ''; } + if (e.keyCode == keycodes.downArrow) { + onFocusFilteredList?.(); + e.preventDefault(); + } } const debouncedSet = _.debounce(x => (value = x), 500); + + export function focus() { + domInput.focus(); + } selectedObjectMatcher(x, selected)); + + if (index == 0 && diff < 0) { + onFocusFilterBox?.(); + return; + } + if (index >= 0) { let newIndex = index + diff; if (newIndex >= list.length) { @@ -30,8 +38,8 @@ module.handleObjectClick(list[newIndex], { tabPreviewMode: true }); } - if (newIndex == 0 && onScrollTop) { - onScrollTop(); + if (newIndex == 0) { + onScrollTop?.(); } } } @@ -69,6 +77,15 @@ } } } + + export function focusFirst() { + domDiv?.focus(); + if (list[0]) { + selectedObjectStore.set(list[0]); + module.handleObjectClick(list[0], { tabPreviewMode: true }); + onScrollTop?.(); + } + }
{ isListFocused = false; }} + bind:this={domDiv} >
diff --git a/packages/web/src/widgets/SqlObjectList.svelte b/packages/web/src/widgets/SqlObjectList.svelte index 39d8a269d..d829b5d52 100644 --- a/packages/web/src/widgets/SqlObjectList.svelte +++ b/packages/web/src/widgets/SqlObjectList.svelte @@ -56,6 +56,8 @@ let filter = ''; let domContainer = null; + let domFilter = null; + let domListHandler; $: objects = useDatabaseInfo({ conid, database }); $: status = useDatabaseStatus({ conid, database }); @@ -159,7 +161,14 @@ {:else} - + { + domListHandler?.focusFirst(); + }} + /> @@ -181,6 +190,7 @@ {:else} ({ ...x, conid, database }))} selectedObjectStore={selectedDatabaseObjectAppObject} getSelectedObject={getSelectedDatabaseObjectAppObject} @@ -189,6 +199,9 @@ onScrollTop={() => { domContainer?.scrollTop(); }} + onFocusFilterBox={() => { + domFilter?.focus(); + }} >