div keydown 시 focusout 되는 문제

발생원인
atag를 사용하여 선택하는 node를 만들어서 문제 발생.

예제 소스

<ul class="dt-children">
   <li data-node-id="5" class="open">
      <div class="dt-node" style="padding-left:24px" draggable="true">
         <i class="dt-expander visible"></i><label class="dt-checkbox dt-checked"><span class="dt-icon checkbox"></span></label><a class="dt-text-content"><span>5Node 1.1.1</span></a>
      </div>
      <ul class="dt-children">
         <li data-node-id="6" class="">
            <div class="dt-node" style="padding-left:36px" draggable="true">
               <i class="dt-expander "></i><label class="dt-checkbox dt-checked"><span class="dt-icon checkbox"></span></label><a class="dt-text-content selected"><span>6Node 1.1.1.1</span></a>
            </div>
            <ul class="dt-children"></ul>
         </li>
      </ul>
   </li>
</ul>

해결방법 1

a tag를 그대로 사용할경우. 

keydown 이벤트 발생후 . 
이벤트 적용할 element에  
이벤트가 끝나는 시점에 focus를 다시 주면해결. 
element.removeAttribute("tabindex");
element.setAttribute("tabindex", "0");
element.focus();

해결방법 2

css 를 이용하는 방법 . 

display:none 이나 visibility:hidden 은 focus를 사라지게함. 
영역을 숨기는 작업을 할때는 

hidden 일경우
opacity : 0 
height: 0

visible 일경우 
opacity : 1 
height: 100%

해결방법 3

제일 쉬운 방법. 

a tag를 다른 태그(span, div)로 교체 하면됨.