[Svelte] button on:click 이벤트가 안 먹힐 때 (on:blur)

<div class="relative">
	<input
        id="file_search"
        class="border p-2 rounded"
        style="width: {$searchWidth}"
        placeholder="파일 이름 검색"
        bind:value={$searchQuery}
        on:focus={() => isSearchFocused.set(true)}
        on:blur={() => isSearchFocused.set(false)}
        on:input={updateSearchResults}
        on:keydown={handleKeyDown}
        aria-haspopup="listbox"
        aria-expanded={get(searchResults).length > 0}
    />
    {#if $isSearchFocused}
        <div
            class="absolute bg-white border border-gray-300 w-full max-h-48 overflow-y-auto"
            role="listbox"
        >
            {#if get(searchResults).length === 0}
                <div class="p-2 text-gray-500">No Match Found</div>
            {:else}
                {#each $searchResults as result, index}
                    <button
                        type="button"
                        class="w-full text-left p-2 cursor-pointer hover:bg-gray-200"
                        on:click={() => handleSearchClick(result)}
                        aria-selected={index === $selectedResultIndex}
                        role="option"
                    >
                        {@html result}
                    </button>
                {/each}
            {/if}
        </div>
    {/if}
</div>​

 

현재 진행 중인 Svelte 코드 중 일부입니다. 코드 상 오류가 없다고 생각을 했는데 button을 눌러도 handleSearchClick 이벤트 자체가 안넘어가더군요.

 

문제는 on:blur={() => isSearchFocused.set(false)}이었습니다. input 버튼을 벗어나면 밑에 매칭되는 검색어들을 끄려고 blur를 써서 focus가 벗어나면 리스트들이 안보이게 해놓으려고 했던 것인데, 리스트 안의 버튼들을 클릭하면 blur로 인해서 $isSearchFocused 이게 false가 되어서 검색 결과 목록 창이 사라지게 되고 button이 안먹히는 것이었습니다.

 

버튼이 먼저 클릭되어서 이게 먼저 적용되고 blur로 꺼질 것이라고 생각했는데, 클릭 이벤트가 발생하기 전에 on:blur 이벤트로 인해 검색 결과 목록이 사라져버리는 것이었습니다. blur 부분을 지우고 따로 바깥 부분을 클릭했을 때, 상세보기 창을 닫는 함수를 만들어서 사용하니 정상작동하게 되었습니다.