Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add tabindex attribute to <b-dropdown>

See original GitHub issue

Is your feature request related to a problem? Please describe…

Currently, there is no way to add the tabindex attribute to the button that opens the dropdown menu.

Current Problem I am having is with a dropdown menu I added to a custom form, which should not be included in the tab flow (tabindex=-1)

Describe the solution you’d like

A new attribute to define the tabindex of the button that opens the dropdown:

<b-dropdown tabindex="-1"/>
<b-dropdown toggle-tabindex="-1"/>

The menu can have one or two buttons, the tabindex attributes should probably both be set independently

Describe alternatives you’ve considered

Workaround I use at the moment:

import { BDropdown } from 'bootstrap-vue';

export default {
  mixins: [BDropdown],
  mounted() {
  updated() {

  methods: {
    patchTabindex() {
      // Fix dropdown button tabindex. We can't do this using bootstrap vue API. 
      // set tabindex="-1"
      this.$nextTick(() => {
        this.$el.querySelectorAll('.btn[aria-haspopup="true"]').forEach(btn => {
          btn.setAttribute('tabindex', '-1');

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:13 (11 by maintainers)

github_iconTop GitHub Comments

michaelzanglcommented, Apr 24, 2020

@thiemeljiri The workaround in the first post should still be working.

jakedolancommented, Sep 24, 2021

An accessible use case for this is using a b-dropdown within a toolbar for use with a wysiwyg.

WAI-ARIA toolbar recommendations involve a roving tabindex so the user is able to tab/shift-tab beyond the toolbar and then return to the most recent button when tabbing back to the toolbar.

It does appear that adding toggleAttrs for user supplied toggle attributes was being worked on for v2.22, see commit from Jan 21. But the status of that release appears to be unknown.

Read more comments on GitHub >

github_iconTop Results From Across the Web

HTML select tabindex Attribute
The tabindex attribute on a <select> tag specifies the keyboard tab order of the dropdown control relative to the other controls on the...
Read more >
How to make tab index work for dropdowns?
The tabindex attribute explicitly defines the navigation order for focusable elements (typically links and form controls) within a page.
Read more >
TabIndex in DropdownList - Angular, Vue, React, Web ...
You just have to set the tabindex attribute to the div element from which you initialize the widget, e.g.: <div id='jqxDropDownList' ...
Read more >
tabindex - HTML: HyperText Markup Language | MDN
The tabindex global attribute indicates that its element can be focused, and where it participates in sequential keyboard navigation ...
Read more >
<select tabindex=""> »
tabindex is used to determine the order of selection when the <select> is in focus, and the tab key is pressed. For more...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found