feat(web): keyboard access for search dropdown, combobox fixes (#8079)

* feat(web): keyboard access for search dropdown

Also: fixing cosmetic issue with combobox component.

* fix: revert changing required field

* fix: create new focusChange action

* fix: combobox usability improvements

* handle escape key on the clear button
* move focus to input when clear button is clicked
* leave the dropdown closed if the user has already closed the dropdown and tabs over to the clear button
* activate the combobox if a user tabs backwards onto the clear button

* rename focusChange to focusOutside

* small fixes

* do not activate combobox on backwards tabbing
* simplify classes in "No results" option
* prevent dropdown option from being preselected when clear button is
  clicked

* fix: remove unused event dispatcher interface

web/src/lib/components/shared-components/search-bar/search-bar.svelte

@@ -12,6 +12,7 @@
   import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
   import { handlePromiseError } from '$lib/utils';
   import { shortcut } from '$lib/utils/shortcut';
+  import { focusOutside } from '$lib/utils/focus-outside';
 
   export let value = '';
   export let grayTheme: boolean;
@@ -94,7 +95,7 @@
   }}
 />
 
-<div class="w-full relative" use:clickOutside={{ onOutclick: onFocusOut }}>
+<div class="w-full relative" use:clickOutside={{ onOutclick: onFocusOut }} use:focusOutside={{ onFocusOut }}>
   <form
     draggable="false"
     autocomplete="off"
@@ -127,6 +128,7 @@
         bind:value
         bind:this={input}
         on:click={onFocusIn}
+        on:focus={onFocusIn}
         disabled={showFilter}
         use:shortcut={{
           shortcut: { key: 'Escape' },