Focus on first input after row is cloned

Question

so I'm pretty sure that I'm doing everything right, but I'm probably missing an event somewhere or something.

Here's what I've got. I have a table and it is filled with a row of inputs, just one row to start. There are four columns and on the fourth column of each row I have attached the focusout event. On focusout clone the last row and add a new row, with the first input of the new row being the focus so that they can just tab and continue.

What is not happening is that the first input is not getting the focus. So I'm trying to figure out why this is occurring.

I have a link to the fiddle and my code is below. Thank you for any help ahead of time!

jQuery

$(function(){
    var $lastRow = $('#testTable').find('tr:last');
    var $tbody = $('#textTabl').find('tbody');
    var $lastCell = $('#testTable').find('tr:last').find('td:last').prev().find('input');
    $($lastRow).find("td:first > input").focus();
    $('body').on('focusout',$lastCell,function(){
        var $newRow = $($lastRow).clone(true, true);
        $($lastRow).addClass('last');
        $($newRow).insertAfter($lastRow);
        $lastRow = $('#testTable').find('tr:last');
        $($lastRow).find("td:first > input").focus();
    });
});

fiddle

http://jsfiddle.net/dh0kxtLv/1/

EDITS & UPDATES

Currently using the new code above to experiment in my fiddle, but it's creating an odd behavior where the only cell that gets the focus is the first one, and if I try to focus out it duplicates the row and focuses on the next first cell. So it's kind of working but still failing

score 4 · Accepted Answer · answered Dec 09 '15 at 20:01

4

I believe the problem you are experiencing is that the last cell is the last focusable element within the document. So by the time the focusout event is fired, focus has left the document which would remove your ability to focus any element.

Using your original code, simply adding an invisible focusable element below your table would avoid the issue:

http://jsfiddle.net/dh0kxtLv/6/

Note the inclusion of <div tabindex='0'></div> after the table.

answered Dec 09 '15 at 20:01

Jack

9,448
3
29
33

But the order of tabbable elements is incremental, 1 comes after 0, isn't it?! – A. Wolff Dec 09 '15 at 20:22
Now, i'm really confused: http://jsfiddle.net/ud9ycqdt/1 **&** http://jsfiddle.net/70ug3ssd/ **&** http://jsfiddle.net/ud9ycqdt/2/ ?! – A. Wolff Dec 09 '15 at 20:27
You are correct that tabindex is incremental, but consider 0 as a special case for defining that you want an element to receive focus based on it's order in the document. – Jack Dec 09 '15 at 20:35
You could think of tabindex as a priority rating, with 1 being the highest priority and zero being the least priority while still being able to be tabbed to. – Jack Dec 09 '15 at 20:37
Ya indeed, a special case regarding spec: http://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute **If the value is a zero** `The user agent must set the element's tabindex focus flag, should allow the element to be reached using sequential focus navigation, and should follow platform conventions to determine the element's relative order.` Now i need to check what they mean by `platform conventions` ... – A. Wolff Dec 09 '15 at 20:37

score 2 · Answer 2 · edited Dec 09 '15 at 20:38

2

To much code, just use:

$(function(){
    $('body').on('focusout','#testTable input:last',function(){
        var el=$(this);
        el.closest('tr').clone().insertAfter(el.closest('tr'))
        el.closest('table').find('tr:last input:first').focus();
    })
});

edited Dec 09 '15 at 20:38

Jack

9,448
3
29
33

answered Dec 09 '15 at 20:04

Vixed

3,429
5
37
68

@Jack, you really don't need to use it in a VAR. – Vixed Dec 09 '15 at 20:14
1

I'd set focusout on last TR element and check for `event.relatedTarget` in case user use `shift+tab` to navigate through the table and btw reset inputs value: http://jsfiddle.net/dh0kxtLv/12/ – A. Wolff Dec 09 '15 at 20:15
1

You created a global variable 'el', you should put the var back. – Jack Dec 09 '15 at 20:15
in this case is not global – Vixed Dec 09 '15 at 20:16
3

@Vixed If you remove `var` statement, it is global – A. Wolff Dec 09 '15 at 20:17
@A.Wolff with your fiddle the input will be cloned with a click everywhere. I tested my code, it seems to work with shift+tab, without the relatedTarget. I've tested it on chrome. – Vixed Dec 09 '15 at 20:25
@Jack you are right I've read it at [this answer](http://stackoverflow.com/questions/6881415/when-is-the-var-need-in-js) sorry for the "battle" ;) – Vixed Dec 09 '15 at 20:43
No problem! Figured it was just a misunderstanding and that you'd try to verify it at some point. – Jack Dec 09 '15 at 20:51

Focus on first input after row is cloned

2 Answers2