jquery .focus not working for input:first

Question

We are having an issue where when we open a modal window we are trying to set the focus to the first input element in the modal that is not of type hidden. here is what we are trying:

$("#test-overlay input[type!=hidden]:first").focus();

However, this call works:

$("#test-overlay #loginInput").focus();

The input field has an id of loginInput.

Any thoughts?

Answer 1

The problem is due to the order of precedence in which jQuery interprets the selector. Try the following:

$('#test-overlay input').not('[type=hidden]').first().focus();

This has the added benefit of not using the :first and attribute not equal to selectors since they're jQuery specific and queries using these cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.