NativeSelect double tabindex

[jringbox]

So, the issue I'm having is tab navigation with NativeSelect. The generated code is shown below.

<div tabindex="0" class="v-select v-widget nativeselect v-select-nativeselect" style="outline-style: none;" id="thing">
<select class="v-select-select" size="1" tabindex="0">
<option value="1">Thing 1</option>
<option value="2">Thing 2</option>
</select>
</div>

Evidently, I have to double tab to navigate to the select element.

Why does the div have a tabindex and the select have a tabindex?

The only part of the generated HTML code that should have a tabindex is the select element. Am I missing something? Is there a way to remove the tabindex on the div but keep it on the select element or is there a way to create the NativeSelect without having it wrap a div around the select?

Is this a bug?

Vaadin Version: 8.1.2
Last working: 7.7.9 (that I used)

[tsuoanttila]

Looks like a bug indeed. The Vaadin 8 implementation of NativeSelect uses GWT Listbox and a FocusableFlowPanelComposite that is meant to take care of focus event from child widgets to make it easier to implement the focus handling on the client-side. However it seems that at least in this case (might be more components using the same Composite) the wrapping div gets an extra tabindex.

As a first fix VNativeSelect constructor could call getElement().removeAttribute("tabindex").

[stale]

Hello there!

It looks like this issue hasn't progressed lately. There are so many issues that we just can't deal them all within a reasonable timeframe.

There are a couple of things you could help to get things rolling on this issue (this is an automated message, so expect that some of these are already in use):

• Check if the issue is still valid for the latest version. There are dozens of duplicates in our issue tracker, so it is possible that the issue is already tackled. If it appears to be fixed, close the issue, otherwise report to the issue that it is still valid.
• Provide more details how to reproduce the issue.
• Explain why it is important to get this issue fixed and politely draw others attention to it e.g. via the forum or social media.
• Add a reduced test case about the issue, so it is easier for somebody to start working on a solution.
• Try fixing the issue yourself and create a pull request that contains the test case and/or a fix for it. Handling the pull requests is the top priority for the core team.
• If the issue is clearly a bug, use the Warranty in your Vaadin subscription to raise its priority.

Thanks again for your contributions! Even though we haven't been able to get this issue fixed, we hope you to report your findings and enhancement ideas in the future too!

[stale]

The issue was automatically closed due to inactivity. If you found some new details to it or started working on it, comment on the issue so that maintainers can re-open it.