datepicker keyboard tab navigation

[WAmadeus]

Overview of the problem

Buefy version: [0.9.8]
Vuejs version: [2.6.12]
OS/Browser: Linux, Firefox 90

Description

Keyboard tab navigation doesn't stop into INPUT element of DatePicker, focusing the outer container instead. It was working fine on previous versions (at least 0.9.3)

Steps to reproduce

Open buefy documentation, "editable" section. Try to navigate using keyboard. You'll have to press TAB twice for keyboard cursor to stop inside DatePicker.

Expected behavior

Press TAB once to focus DatePicker

Actual behavior

You need to press TAB twice. First TAB focus the outer frame of DatePicker. Second TAB finally moves focus to INPUT element.

[oddjobz]

Hi, any news on this one?
To expand a little, I'm seeing the same issue on Chrome, also seems to happen with the time picker widget ...
Buefy version: [0.9.14]
Vuejs version: [2.6.11]

[Spacarar]

I'm having this issue as well, and ran into this before opening my own issue.

to help document this issue I've created two codepens.

• V0.9.21 not working as expected.
  • https://codepen.io/Wolfwood_/pen/YzedOJp?editors=1111
• V0.8.20 working as expected.
  • https://codepen.io/Wolfwood_/pen/ZErVMPN?editors=1111

Hopefully this will help get this issue some attention.

[Spacarar]

This seems to stem back to PR #3363 as commented in #3553

[WAmadeus]

You are right.

The addition of 'tabIndex="0"' in 'dropdown-trigger' is causing this problem. If you open devtools in your codpen example and manually remove it, it starts to work as expected.

Maybe some sort of js to remove it can be a workaround until a proper fix is commited.

[jtommy]

@WAmadeus @Spacarar any PR are welcome

[Spacarar]

@jtommy here's a PR that adds a prop trigger-tabindex to the dropdown component and sets it to -1 in the datepicker's dropdown to solve this issue. It was the easiest solution I could think of, but if you have another solution I'm open to suggestions.

#3749