Question

This is the jsFiddle – http://jsfiddle.net/75Rqe/8/

Unfortunately, I could not reduce it to a minimal example, so it contains quite a lot of code.

It is a stripped down version of a mixin I wrote for the YUI3 Datatable to implement inplace edit.

First the problem:

1. Load the jsFiddle
2. Scroll the table down until the row with dnum 26 is the last visible row in the table:
   (there is nothing special about 26, just for the sake of the example)
3. Now click the dnum field of this row and change 26 to something else:
   
4. Finally press the tab key:
   

If you are using Chrome, then the table is auto scrolled on tab to show the modified row right in the middle of the table.

No such thing happens on Firefox or IE9:

I understand that it is unfair to expect from anyone to analyze the code of jsFiddle, so my question is how can I troubleshoot this thing? I was trying to place breakpoints in various “obvious” places using the Chrome development tools – no dice. The content scrolls and no breakpoint is ever hit.

Can I break when the scroll event occurs?

In short, I am pretty desperate (debugging Chrome with windbg already crossed my sick mind).

Any feedback is welcome.

EDIT

OK, SO insists on some code, so here it is:

YUI.add('dt-inplace-edit',
  function (Y) {
    "use strict";
    ...

    function DataTableInplaceEdit() {
    }

    DataTableInplaceEdit.prototype = {
    ...
    };

    Y.DataTable.InplaceEdit = DataTableInplaceEdit;
  }, '0.1', {requires: ['node']});


YUI({filter: 'raw', debug: true, combine: false}).use("datatable", "node", 'datatable-scroll',
  'dt-inplace-edit',
    function(Y) {
    var i, table, data =[
       {dnum:100, dint:1, dtxt:"Test 1 string", dname:"George"},
       {dnum:101, dint:2, dtxt:"Test 2 string", dname:"Paul"},
       {dnum:102, dint:3, dtxt:"Test 3 string", dname:"Chase"},
       {dnum:103, dint:4, dtxt:"Test 4 string", dname:"Marge"},
       {dnum:104, dint:5, dtxt:"Test 5 string", dname:"Ben"},
       {dnum:105, dint:6, dtxt:"Test 6 string", dname:"Skyler"},
       {dnum:106, dint:7, dtxt:"Test 7 string", dname:"Lara"},
       {dnum:107, dint:1, dtxt:"Test 1 string", dname:"George"},
       {dnum:108, dint:2, dtxt:"Test 2 string", dname:"Paul"},
       {dnum:109, dint:3, dtxt:"Test 3 string", dname:"Chase"},
       {dnum:110, dint:4, dtxt:"Test 4 string", dname:"Marge"},
       {dnum:111, dint:5, dtxt:"Test 5 string", dname:"Ben"},
       {dnum:112, dint:6, dtxt:"Test 6 string", dname:"Skyler"},
       {dnum:113, dint:7, dtxt:"Test 7 string", dname:"Lara"}
    ];

    Y.Base.mix(Y.DataTable, [Y.DataTable.InplaceEdit]);

    data = data.concat(data.concat(data));
    for (i = 0; i < data.length; i += 1) {
        data[i] = Y.merge(data[i]);
        data[i].dnum = i;
    }

    Y.one('body').addClass("yui3-skin-sam");               
    table = new Y.DataTable({
        columns:[ 'dnum', 'dint', 'dtxt', 'dname' ],
        data: data,
        height: '15em',
        width: '100%',
        scrollable: 'y',
    }).render('#dt');
});

Answer 1

When you tab to an element, it seems that chrome scrolls the element into the middle of the container, where as in FF and IE, it seems to do the default behavior of scrollIntoView(), which is to align it to the bottom

See this example (in Chrome and FF/IE). It should help you understand the problem. Try tabbing after you clicked the first anchor in the scroll container, and also try clicking the buttons that call scrollIntoView directly

I particularly prefer Chrome’s behavior, but I don’t think there’s much you can do about it, besides calling scrollIntoView yourself after uses hits tab (and cancelling the tab’s default behavior with e.preventDefault)

Here’s an implementation where tabbing through the links doesn’t move items into the middle when tabbing them