코드

<form :class="keywordLayer ? 'focus' : ''">
  <input
    v-model="keyword"
    type="search"
    autocomplete="off"
    placeholder="검색해 주세요."
    @focus="keywordLayer = true"
    @blur="handleBlurInput"
  />
  <ul v-if="keywordLayer">
    <li
      v-for="(keyword, index) in filteredRelated"
      :key="index"
      @mousedown="changeLayerFocus"
      @click="handleLayerClick"
    >
      <a role="button">
        {{ `연관검색어 ${index}` }}
      </a>
    </li>
  </ul>
</form>

연관검색어 레이어 문제

• li태그에서 mousedown이벤트 없이 click으로만 연관 검색어를 선택했을 때 input의 blur이벤트가 먼저 작동하면서 레이어가 꺼지고 click이벤트가 작동하지 않는 문제가 있었다. (도대체 클릭을 했는데 왜 안 되나 어이가 없어서 샷건 치고 싶었다.)

해결 방법

• blur이벤트보다 먼저 작동하는 mousedown이벤트를 추가했다.
• mousedown이벤트에 원하는 명령을 입력하고 그 이후 input의 blur이벤트가 발생하여 변수에 선택한 연관검색어 값을 넣을 수 있었고, 레이어 창도 자연스럽게 닫을 수 있었다.
• click이벤트는 blur 이후 처리할 내용을 넣었는데 이후 작업이 없다면 제거해도 상관이 없다.