Scrolling with tabbing not working in Chrome

Question

I've found that if I place a table element inside div element and set div's properties somewhat like width, height and overflow:auto; and place some input element inside table's td. than moving with tabs and found that scroll doesn't move with tab (if input elements contains some data). This issues encounters only in Chrome not in other modern browsers. Here is sample code:

<div style="overflow: auto; height: 100px;width:400px;">
        <table >
            <tbody>
            <tr>
                <td style="width:100px;"><input value="1" type="text"/></td>
                <td style="width:100px;"><input value="2" type="text"/></td>
                <td style="width:100px;"><input value="3" type="text"/></td>
                <td style="width:100px;"><input value="4" type="text"/></td>
                <td style="width:100px;"><input value="5" type="text"/></td>
                <td style="width:100px;"><input value="6" type="text"/></td>
                <td style="width:100px;"><input value="7" type="text"/></td>
                <td style="width:100px;"><input value="8" type="text"/></td>
                <td style="width:100px;"><input value="9" type="text"/></td>
            </tr>
            </tbody>
        </table>

</div>

I've also created a link on plunker:

http://plnkr.co/edit/1l8HftcoDlebywQ8LDos?p=preview

http://embed.plnkr.co/1l8HftcoDlebywQ8LDos/preview

Any help regarding this will be highly appreciated.

Answer 1

Possibly Try Re-Installing Chrome, and/or try this same code on Safari. Maybe try a mouse, or use your trackpad if already using one.

Answer 2

On Windows 8

Chrome: Scrolling with TABKEY does not scroll to make visible a row outside the tbody viewport correctly

Version 39.0.2171.95 Version 41.0.2257.0 canary (64-bit) Version 41.0.2236.0 (64-bit)

Works correctly on IE 11 Firefox 31.0

Herewith my solution tested with latest Chrome & IE11

        // rowObj is javascript <tr> element object
        rowObj.addEventListener("focus", function( event ) {
        console.log("focus visible row=" + event.currentTarget.sectionRowIndex);
        if(event.currentTarget.sectionRowIndex === 0)
            detObj.scrollTop = 0;                      //detObj is javascript <td>
        else
        if(event.currentTarget.sectionRowIndex > 4)    // is the max visible rows in <tbody>
            detObj.scrollTop = 9999;                   // will focus on last row in <tbody>
    }, true);

// If required I can supply javascript code to calculate number of visible rows in