Dropdown:Active

This story threw an error after it finished rendering which means interactions may not have been executed fully.

TestingLibraryElementError: Found multiple elements by: [data-testid="dropdown-btn"]

Here are the matching elements:

Ignored nodes: comments, script, style
<div
  class="btn-group vs-dropdown"
  data-testid="dropdown-btn"
  isactive="true"
>
  <button
    aria-expanded="false"
    aria-haspopup="menu"
    class="btn btn-md btn-primary dropdown-toggle"
    id="__BVID__410273___BV_dropdown__"
    type="button"
  >
    
    
    
     Language
    
    
    
  </button>
  
  <ul
    aria-labelledby="__BVID__410273___BV_dropdown__"
    class="dropdown-menu overflow-auto"
    role="menu"
    style="position: absolute; left: 0px; top: 0px; display: none; transform: translate(0px, 0px);"
  >
    
    
    <li
      role="presentation"
    >
      <button
        class="dropdown-item"
        role="menuitem"
        title=""
        type="button"
      >
        
        
        English
        
        
      </button>
    </li>
    <li
      role="presentation"
    >
      <button
        class="dropdown-item"
        role="menuitem"
        type="button"
      >
        
        
        Deutsch
        
        
      </button>
    </li>
    <li
      role="presentation"
    >
      <button
        aria-current="true"
        class="dropdown-item active"
        role="menuitem"
        type="button"
      >
        
        
        Español
        
        
      </button>
    </li>
    <li
      role="presentation"
    >
      <button
        class="dropdown-item"
        role="menuitem"
        type="button"
      >
        
        
        Français
        
        
      </button>
    </li>
    <li
      role="presentation"
    >
      <button
        class="dropdown-item"
        role="menuitem"
        type="button"
      >
        
        
        Italiano
        
        
      </button>
    </li>
    <li
      role="presentation"
    >
      <button
        class="dropdown-item"
        role="menuitem"
        type="button"
      >
        
        
        Nederlands
        
        
      </button>
    </li>
    
    
  </ul>
  
</div>

Ignored nodes: comments, script, style
<div
  class="dropdown vs-dropdown"
  data-testid="dropdown-btn"
  isactive="true"
>
  <ul
    class="dropdown-menu overflow-auto"
    role="menu"
  >
    
    <li
      role="presentation"
    >
      <button
        class="dropdown-item"
        role="menuitem"
        title=""
        type="button"
      >
        
        
        English
        
        
      </button>
    </li>
    <li
      role="presentation"
    >
      <button
        class="dropdown-item"
        role="menuitem"
        type="button"
      >
        
        
        Deutsch
        
        
      </button>
    </li>
    <li
      role="presentation"
    >
      <button
        aria-current="true"
        class="dropdown-item active"
        role="menuitem"
        type="button"
      >
        
        
        Español
        
        
      </button>
    </li>
    <li
      role="presentation"
    >
      <button
        class="dropdown-item"
        role="menuitem"
        type="button"
      >
        
        
        Français
        
        
      </button>
    </li>
    <li
      role="presentation"
    >
      <button
        class="dropdown-item"
        role="menuitem"
        type="button"
      >
        
        
        Italiano
        
        
      </button>
    </li>
    <li
      role="presentation"
    >
      <button
        class="dropdown-item"
        role="menuitem"
        type="button"
      >
        
        
        Nederlands
        
        
      </button>
    </li>
    
  </ul>
</div>

(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).

Ignored nodes: comments, script, style
<div
  data-v-app=""
  id="storybook-root"
>
  
  <div
    class="btn-group vs-dropdown"
    data-testid="dropdown-btn"
    isactive="true"
  >
    <button
      aria-expanded="false"
      aria-haspopup="menu"
      class="btn btn-md btn-primary dropdown-toggle"
      id="__BVID__410273___BV_dropdown__"
      type="button"
    >
      
      
      
       Language
      
      
      
    </button>
    
    <ul
      aria-labelledby="__BVID__410273___BV_dropdown__"
      class="dropdown-menu overflow-auto"
      role="menu"
      style="position: absolute; left: 0px; top: 0px; display: none; transform: translate(0px, 0px);"
    >
      
      
      <li
        role="presentation"
      >
        <button
          class="dropdown-item"
          role="menuitem"
          title=""
          type="button"
        >
          
          
          English
          
          
        </button>
      </li>
      <li
        role="presentation"
      >
        <button
          class="dropdown-item"
          role="menuitem"
          type="button"
        >
          
          
          Deutsch
          
          
        </button>
      </li>
      <li
        role="presentation"
      >
        <button
          aria-current="true"
          class="dropdown-item active"
          role="menuitem"
          type="button"
        >
          
          
          Español
          
          
        </button>
      </li>
      <li
        role="presentation"
      >
        <button
          class="dropdown-item"
          role="menuitem"
          type="button"
        >
          
          
          Français
          
          
        </button>
      </li>
      <li
        role="presentation"
      >
        <button
          class="dropdown-item"
          role="menuitem"
          type="button"
        >
          
          
          Italiano
          
          
        </button>
      </li>
      <li
        role="presentation"
      >
        <button
          class="dropdown-item"
          role="menuitem"
          type="button"
        >
          
          
          Nederlands
          
          
        </button>
      </li>
      
      
    </ul>
    
  </div>
  <div
    class="dropdown vs-dropdown"
    data-testid="dropdown-btn"
    isactive="true"
  >
    <ul
      class="dropdown-menu overflow-auto"
      role="menu"
    >
      
      <li
        role="presentation"
      >
        <button
          class="dropdown-item"
          role="menuitem"
          title=""
          type="button"
        >
          
          
          English
          
          
        </button>
      </li>
      <li
        role="presentation"
      >
        <button
          class="dropdown-item"
          role="menuitem"
          type="button"
        >
          
          
          Deutsch
          
          
        </button>
      </li>
      <li
        role="presentation"
      >
        <button
          aria-current="true"
          class="dropdown-item active"
          role="menuitem"
          type="button"
        >
          
          
          Español
          
          
        </button>
      </li>
      <li
        role="presentation"
      >
        <button
          class="dropdown-item"
          role="menuitem"
          type="button"
        >
          
          
          Français
          
          
        </button>
      </li>
      <li
        role="presentation"
      >
        <button
          class="dropdown-item"
          role="menuitem"
          type="button"
        >
          
          
          Italiano
          
          
        </button>
      </li>
      <li
        role="presentation"
      >
        <button
          class="dropdown-item"
          role="menuitem"
          type="button"
        >
          
          
          Nederlands
          
          
        </button>
      </li>
      
    </ul>
  </div>
  
</div>
    at Object.getElementError (https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/assets/index-Yd5uyhb9.js:143:284)
    at ro (https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/assets/index-Yd5uyhb9.js:157:3483)
    at no (https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/assets/index-Yd5uyhb9.js:157:3528)
    at https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/assets/index-Yd5uyhb9.js:159:10
    at https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/assets/index-Yd5uyhb9.js:165:387
    at Cp.invoke (https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/assets/index-Yd5uyhb9.js:27:9139)
    at Cp.track (https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/assets/index-Yd5uyhb9.js:27:6400)
    at Object.getByTestId (https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/assets/index-Yd5uyhb9.js:27:5672)
    at o.play (https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/assets/Dropdown.stories-ab_cbp_A.js:24:271)
    at playFunction (https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/sb-preview/runtime.js:111:5723)