Name: a better way to prevent completion list disappear before we select it

This commit is contained in:
lilydjwg 2021-10-28 23:01:40 +08:00
parent 2452b1ffd4
commit 88cd84a403

View File

@ -128,11 +128,11 @@
<input bind:this={input} type="text" <input bind:this={input} type="text"
on:input={() => {should_hide=false;may_complete()}} on:input={() => {should_hide=false;may_complete()}}
on:focus={() => should_hide=false} on:focus={() => should_hide=false}
on:blur={() => {setTimeout(() => should_hide=true, 500);update_value()}} on:blur={() => {should_hide=true;update_value()}}
on:keydown={select_by_key} on:keydown={select_by_key}
/> />
<img class="selected-avatar" alt="" src="{url}/avatar/{selected?selected:'nobody'}.jpg"/> <img class="selected-avatar" alt="" src="{url}/avatar/{selected?selected:'nobody'}.jpg"/>
<ul bind:this={ul} on:click={select_by_click} class:hidden={names.length === 0 || should_hide}> <ul bind:this={ul} on:click={select_by_click} on:mousedown|preventDefault={()=>{}} class:hidden={names.length === 0 || should_hide}>
{#each names as name, i (name)} {#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> <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} {/each}
@ -192,6 +192,7 @@
} }
.selected-avatar { .selected-avatar {
position: absolute; position: absolute;
pointer-events: none;
top: 1px; top: 1px;
left: 1px; left: 1px;
height: calc(2.3em - 2px); height: calc(2.3em - 2px);