ハンドルのドロップダウンのフォーカス状態

Question

現在、純粋なJavaScriptでドロップダウンコンポーネントを作成しています。ユーザーがドロップダウン・トグルをクリックすると、コンテンツ・ゲインのフォーカスとそのコンテンツが表示されます。ユーザーがその外部をクリックすると、コンテンツのフォーカスが失われ、非表示になります。

これまでのところ、それは素晴らしい作品です。しかし、私は2つの問題に直面しています。

最初のものは、ドロップダウン内の要素（アンカータグなど）がクリックされたときに、ドロップダウンでフォーカスが失われるということです。

2番目の問題は、ドロップダウンコンテンツが表示されているときにドロップダウントグルをクリックしたときに、ドロップダウントグルに登録されたクリックのために閉じるのではなく、閉じることです。

HTML：

<div class="dropdown"> 
    <a href="#" class="dropdown-toggle">Dropdown toggle</a> 
    <div class="dropdown-content" tabindex="0"> 
     <ul> 
      <li> 
       <a href="http://example.com">My profile</a> 
      </li> 
      <li> 
       <a href="http://example.com">Log out</a> 
      </li> 
     </ul> 
    </div> 
</div> 

CSS：

.dropdown { 
    position: relative; 
} 

.dropdown.is-open .dropdown-content { 
    display: block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    top: 100%; 
    width: 100%; 
    padding: 0.5rem 0; 
    background: #fff; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
} 

JS：

class Dropdown { 

    constructor(element) { 
     this.element = element; 
     this.toggle = this.element.querySelector('.dropdown-toggle'); 
     this.content = this.element.querySelector('.dropdown-content'); 

     this.bindings(); 
    } 

    bindings() { 
     this.toggle.addEventListener('click', this.open.bind(this)); 
     this.content.addEventListener('keydown', this.handleKeyDown.bind(this)); 
     this.content.addEventListener('focusout', this.close.bind(this)); 
    } 

    open(e) { 
     e.preventDefault(); 
     this.element.classList.add('is-open'); 
     this.content.focus(); 
    } 

    close(e) { 
     this.element.classList.remove('is-open'); 
    } 

    handleKeyDown(e) { 
     if (e.keyCode === 27) { 
      this.close(e); 
     } 
    } 

} 

document.querySelectorAll('.dropdown').forEach(dropdown => new Dropdown(dropdown)); 

私は運なしでこれらの問題を解決する方法を上まわりで私の頭を取得しようとしてきました。どのようにこれらの問題を解決するための任意のアイデア？

Answer 1

いくつかのテストの後、私はうまくいくソリューションを見つけました。以下のコードを試してください

 class Dropdown { 

      constructor(element) { 
       this.element = element; 
       this.toggle = this.element.querySelector('.dropdown-toggle'); 
       this.content = this.element.querySelector('.dropdown-content'); 

       this.bindings(); 
      } 

      bindings() { 
       this.toggle.addEventListener('click', this.open.bind(this)); 
       this.content.addEventListener('keydown', this.handleKeyDown.bind(this)); 
       this.element.addEventListener('focusout', this.onFocusOut.bind(this),true); 
      } 
      onFocusOut(e) { 
       if (!this.element.contains(e.relatedTarget)) { 
        this.close(e) 
       } 
      } 

      open(e) { 
       e.preventDefault(); 
       this.element.classList.toggle('is-open'); 
       this.content.focus(); 
      } 

      close(e) { 
       e.preventDefault(); 
       this.element.classList.remove('is-open'); 
      } 

      handleKeyDown(e) { 
       if (e.keyCode === 27) { 
        this.close(e); 
       } 
      } 

     }