jQuery focus() not working in FireFox but working in Chrome

Question

I know this question has been asked before as I am looking for a solution in the past hours. The idea is that I have a table cell that display a text value. Upon click event that value is transformed into an input field which makes it editable.

My code works perfectly on Chrome but when testing in FireFox the input text appear but I cant edit the field at all.

Here is my code:

function openInput(product_row) {
   var qty = $('[name="order_product[' + product_row + '][quantity]"]').val();
   text = '<input type="text" name="enter_order_product[' + product_row + '][quantity]" value="'+qty+'" style="text-align:right;width:30px;" />';
   $( "#order_product_" + product_row + "_quantity" ).html(text + '<input type="hidden" name="order_product[' + product_row + '][quantity]" value="' + qty + '" />');

   var input = $('[name="enter_order_product[' + product_row + '][quantity]');
   input.focus();
}

openInput function is being called on click event on table cell.

I have to say that I have tried this workaround with no luck

setTimeout(function() {
    input.focus();
}, 0);

Any thoughts would be helpful. Cheers!

Answer 1

Your input selector is misformatted as you're missing the closing "]:

var input = $('[name="enter_order_product[' + product_row + '][quantity]');

Change it to:

var input = $('[name="enter_order_product[' + product_row + '][quantity]"]');