Treegrid Example: getFocusableElements() does not support including <select> elements in cells

[stephanieleary]

In the Treegrid pattern examples, there is a function called getFocusableElements() that is used to find interactive child elements of a selected row and toggle their tabindex values. The function specifies which elements should be focusable, noting that <textarea> has been left out deliberately:

root.querySelectorAll('a,button,input,td>[tabindex]');

The list should include the <select> element as well.

[mcking65]

@stephanieleary

I commented in the PR.

Like textarea, select consumes arrow keys. So, I think that including select along with button and link is probably going to break the treegrid navigation if a select element is included in a cell.

Note, I'm guessing based on reading the code, and in the PR, I described what I think the code needs to do if you want to extend the example to enable the treegrid to include select elements.

[jongund]

@mcking65
I creating a testing branch the includes both a text input and a select element in each row.
treegrid testing example with select and input in each row

It seems the tab behavior is the same for input and select in the treegrid, but the tab description in the example page is not accurate of the actual behavior of the example.