Why is tab keyboard navigation not working with tabIndex set? - html

Question

Consider this HTML table:
<table contenteditable="true">
<tbody>
<tr>
<td tabindex="0"></td>
<td tabindex="0"></td>
<td tabindex="0"></td>
</tr>
<tr>
<td tabindex="0"></td>
<td tabindex="0"></td>
<td tabindex="0"></td>
</tr>
</tbody>
</table>
I would like the user to be able to tab from cell to cell as he edits the table contents, and to programmatically focus on any given cell. I observed the following behaviors in Chrome, and I'm trying to understand and remedy them:
I don't understand why if I put the cursor in one cell and press the tab key, the cursor doesn't go to the next cell.
I don't understand why when I click on a cell, although the cursor shows up and I can edit its contents, focus still seems to be on the table as a whole rather than that cell specifically (found out by console logging document.activeElement)
I don't understand why when I execute myCell.focus() in Javascript, the cursor doesn't appear in the cell in question even though the cell becomes the activeElement and the table as a whole has contenteditable="true"
JSFiddle example

Answer 1

For tabbing to work on both Chrome 76 and Firefox 68, I needed to set the table itself to not be editable, but then also set each cell to be editable:
<table contenteditable="false">
<tbody>
<tr>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
<tr>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
</tbody>
</table>
JSFiddle example

Answer 2

It will be better to use input elements in each tds and then use this function:
js
$('td').bind('keypress', function(event) {
if(event.which === 9) {
if ($(this).next().length > 0){
$(this).next().find("input").focus();
}else{
$(this).parent().next().find('td').first().find("input").focus();
}
});
html
<table contenteditable="true">
<tbody>
<tr>
<td tabindex="0"><input /></td>
<td tabindex="0"><input /></td>
<td tabindex="0"><input /></td>
</tr>
<tr>
<td tabindex="0"><input /></td>
<td tabindex="0"><input /></td>
<td tabindex="0"><input /></td>
</tr>
</tbody>
</table>