title: Dropdown menu elements lose focus on tab
body: <p>My dropdown menu button opens on hover (CSS), but its content is not accessible on the tab.</p>
  
  <p>On button- tab, the dropdown menu opens on next tab press it skips all content of the menu, closes it and continues to go to the next focus elements on the page.</p>
  
  <p>I need to be able to tab through the menu. This from my react component:</p>
  
  <pre><code>&lt;div className="dropdown" 
          tabIndex="0"
          role="navigation"&gt;
            &lt;button className="dropBtn" tabIndex="0" role="menu" type="button" aria-expanded="false" aria-controls="navbar"&gt;
              &lt;i className="hover"&gt;Places&lt;/i&gt;
            &lt;/button&gt;
            &lt;div tabIndex="0" className="dropdown-content"&gt;
            &lt;div tabIndex='0' className='filter'&gt;
              &lt;input 
                className='input'
                tabIndex="0"
                type="text"
                placeholder="Search your place"
                value={this.props.query}            
                onChange={e =&gt; this.props.handleUpdateQuery(e.target.value)}/&gt;
                &lt;/div&gt;
               {/* &lt;div className="search-places-results"&gt; */}
               &lt;ul className='listOfPlaces' 
               role="menubar"&gt;
                {this.props.filteredPlaces.map((item)=&gt;{
                  return &lt;li item={item} 
                  tabIndex="0"
                  role="menuitem"
                  items={this.props.places} 
                  key={item.id}
                  onClick={(e)=&gt;{this.props.onItemClick(e, item.id)}}&gt;
                  {item.name}&lt;/li&gt;
                })}
               &lt;/ul&gt;
              {/* &lt;/div&gt; */}
            &lt;/div&gt;
          &lt;/div&gt; 
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.dropdown-content .filter:hover,
  .dropdown-content .filter:focus,
  .dropdown-content ul li:hover,
  .dropdown-content ul li:focus {
    background-color: rgb(41, 160, 240);
  }
  
  .dropdown:hover .dropdown-content,
   .dropdown:focus .dropdown-content {
    display: block;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ocTYH.png" rel="nofollow noreferrer">This is how it opens on tab press</a></p>