From d7cab6461f53c18dcfa8b046bae94c0e296f75bd Mon Sep 17 00:00:00 2001
From: lilydjwg <lilydjwg@gmail.com>
Date: Tue, 12 Oct 2021 18:58:42 +0800
Subject: [PATCH] better way to hide completion list

---
 src/Name.svelte | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/Name.svelte b/src/Name.svelte
index 2e6c4f2..6b55495 100644
--- a/src/Name.svelte
+++ b/src/Name.svelte
@@ -54,16 +54,6 @@
     }
   }
 
-  $: {
-    if(ul) {
-      if(names.length === 0 || (!has_focus && !has_mouse)) {
-        ul.style.display = 'none'
-      }else{
-        ul.style.display = 'block'
-      }
-    }
-  }
-
   function select_by_click(e) {
     let el = e.target
     if(el.tagName == 'IMG') {
@@ -125,7 +115,7 @@
 <div on:mouseenter={() => has_mouse=true} on:mouseleave={() => has_mouse=false}>
   <input bind:this={input} type="text" on:input={may_complete} on:focus={() => has_focus=true} on:blur={() => {has_focus=false;update_value()}} on:keydown={select_by_key}/>
   <img class="selected-avatar" alt="" src="{url}/avatar/{selected?selected:'nobody'}.jpg"/>
-  <ul bind:this={ul} on:click={select_by_click}>
+  <ul bind:this={ul} on:click={select_by_click} class:hidden={names.length === 0 || (!has_focus && !has_mouse)}>
     {#each names as name, i (name)}
       <li data-idx={i} class:selected={i===selected_idx} title={name[1]}><img src="{url}/avatar/{name[0]}.jpg" alt="avatar"/>{name[1]}</li>
     {/each}
@@ -142,7 +132,6 @@
     margin: 0;
     position: absolute;
     left: 0;
-    display: none;
     background-color: white;
     box-shadow: 0 0 4px var(--color-inactive);
     clip-path: polygon(-100% 0, 200% 0, 200% 200%, -100% 200%);
@@ -185,4 +174,7 @@
     height: calc(2.3em - 2px);
     width: calc(2.3em - 2px);
   }
+  .hidden {
+    display: none;
+  }
 </style>