use keyboard for navigation between searchbox and table list

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();
+  }
 </script>
 
 <input

packages/web/src/widgets/AppObjectListHandler.svelte

@@ -9,13 +9,21 @@
   export let module;
 
   export let onScrollTop = null;
+  export let onFocusFilterBox = null;
 
   let isListFocused = false;
+  let domDiv = null;
 
   function handleKeyDown(ev) {
     function selectByDiff(diff) {
       const selected = getSelectedObject();
       const index = _.findIndex(list, x => 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) {
+        if (newIndex == 0) {
-          onScrollTop();
+          onScrollTop?.();
         }
       }
     }
@@ -69,6 +77,15 @@
       }
     }
   }
+
+  export function focusFirst() {
+    domDiv?.focus();
+    if (list[0]) {
+      selectedObjectStore.set(list[0]);
+      module.handleObjectClick(list[0], { tabPreviewMode: true });
+      onScrollTop?.();
+    }
+  }
 </script>
 
 <div
@@ -82,6 +99,7 @@
   on:blur={() => {
     isListFocused = false;
   }}
+  bind:this={domDiv}
 >
   <slot />
 </div>

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 @@
   </WidgetsInnerContainer>
 {:else}
   <SearchBoxWrapper>
-    <SearchInput placeholder="Search in tables, objects, # prefix in columns" bind:value={filter} />
+    <SearchInput
+      placeholder="Search in tables, objects, # prefix in columns"
+      bind:value={filter}
+      bind:this={domFilter}
+      onFocusFilteredList={() => {
+        domListHandler?.focusFirst();
+      }}
+    />
     <CloseSearchButton bind:filter />
     <DropDownButton icon="icon plus-thick" menu={createAddMenu} />
     <InlineButton on:click={handleRefreshDatabase} title="Refresh database connection and object list" square>
@@ -181,6 +190,7 @@
       <LoadingInfo message={$status?.feedback?.analysingMessage || 'Loading database structure'} />
     {:else}
       <AppObjectListHandler
+        bind:this={domListHandler}
         list={flatFilteredList.map(x => ({ ...x, conid, database }))}
         selectedObjectStore={selectedDatabaseObjectAppObject}
         getSelectedObject={getSelectedDatabaseObjectAppObject}
@@ -189,6 +199,9 @@
         onScrollTop={() => {
           domContainer?.scrollTop();
         }}
+        onFocusFilterBox={() => {
+          domFilter?.focus();
+        }}
       >
         <AppObjectList
           list={objectList