How to set focus on first focusable element jQuery?

The :focusable psuedo selector is only available with jquery-ui. If your only using jquery then replace '.find(':focusable') with the following:

.find('button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])')


What you need is to find the first focusable element:

$(element).next().find(':focusable').first().focus();

Without .first(), focus() is applied to all the elements matching :focusable, which eventually ends up focusing the last element.


This statement $(element).next().find(':focusable').focus(); will look for all elements with the focusable attribute and returns the last one. What you want to do is limit it to a particular one which is the first. You can use the .eq() function which specifies the actual index you want like this

$(element).next().find(':focusable').eq(0).focus();