fix: Selector mouse behavior, focus event

accidentally broke mouse selection in surface update
also update action on story, once it starts working

webui/src/components/utils/Selector.svelte

@@ -179,7 +179,7 @@
         break;
     }
     dispatch("input", value);
-    visible = false;
+    options = [];
   }
 
   let listEl: HTMLUListElement;
@@ -198,7 +198,7 @@
     switch (ev.key) {
       case "ArrowDown":
         targetIndex += 1;
-        
+
         // pressed down on last
         if (targetIndex >= optionEls.length) {
           targetIndex = 0;
@@ -233,8 +233,10 @@
   }
 
   let inputFocused = false;
+  let hover = false; // otherwise clicking makes options disappear faster than it can emit a set
   $: visible =
-    (inputFocused || optionFocusIndex > -1) && Boolean(options.length);
+    (inputFocused || hover || optionFocusIndex > -1) && Boolean(options.length);
+  $: dispatch("focus", inputFocused || hover || optionFocusIndex > -1);
 </script>
 
 <div class="selector">
@@ -256,7 +258,13 @@
       {placeholder}
     />
   {/if}
-  <ul class="options" class:visible bind:this={listEl}>
+  <ul
+    class="options"
+    class:visible
+    on:mouseenter={() => (hover = true)}
+    on:mouseleave={() => (hover = false)}
+    bind:this={listEl}
+  >
     {#each options.slice(0, MAX_OPTIONS) as option, idx}
       <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
       <li

webui/src/stories/Selector.stories.ts

@@ -10,6 +10,9 @@ const meta: Meta<Selector> = {
     onInput: {
       action: "input",
     },
+    onFocus: {
+      action: "focus"
+    }
   },
   decorators: [() => RouterDecorator], // due to upobject link in selected state
 };