Fixing focus() Issues in JavaScript [Resolved]

Introduction

In JavaScript, the focus() method is a frontend tool that allows us to set the focus on a specific element in the DOM. However, there are times when this method does not seem to work as expected.

This short Byte will guide you through some common issues and "gotchas" that might cause the focus() method to fail and provide solutions.

Check your Dev Tools

The first step in troubleshooting a focus() issue is to check your browser's Dev Tools Console. Here, you should be able to find any error messages related to your code. To open the console in most browsers, you can use the Ctrl+Shift+J (Windows/Linux) or Cmd+Opt+J (Mac) keyboard shortcuts.

document.getElementById('nonexistent').focus();

If the element doesn't exist, you'll see an error like this:

Uncaught TypeError: Cannot read property 'focus' of null

This error tells us that your JavaScript is trying to focus on an element that doesn't exist in the DOM.

Understanding Focusable Elements in JavaScript

Note: Not all elements in JavaScript can receive focus. Only certain elements, known as 'focusable' elements, can be be the subject of focus.

The list of focusable elements includes <button>, <input>, <select>, <textarea>, <a> with href or tabindex, and any other element with the tabindex property. If you're trying to focus on an element that is not focusable, the focus() method will not work.

document.getElementById('div').focus();

If the div element doesn't have a tabindex attribute, the focus method won't work.

Ensure Visibility of Target Elements

Another common issue that might prevent the focus() method from working is the visibility of the target element. The target element must be visible (i.e., not hidden with CSS) and in the current viewport.

Note: An element hidden with CSS (display: none or visibility: hidden) or positioned outside of the viewport cannot receive focus.

document.getElementById('hiddenElement').focus();

If the element is hidden, the focus() method will not work.

Check if Focusable

Given what we've learned so far, we could create a function that helps us check if an element is focusable. This would be helpful if you don't know beforehand what element we're trying to focus on. The function might look like this:

function isFocusable($elem) {
    if ($elem.is(":hidden") || $elem.is(":disabled")) {
        return false;
    }

    var tabIndex = +$elem.attr("tabindex");
    tabIndex = isNaN(tabIndex) ? -1 : tabIndex;
    return $elem.is(":input, a[href], area[href], iframe") || tabIndex > -1;
}

The function above was adapted from this SO answer.

Conclusion

The focus() method in JavaScript is a helpful tool for directing user interaction, but it can sometimes fail due to issues like non-existent or non-focusable elements, or visibility issues. By checking your Dev Tools Console Tab for errors, understanding which elements can receive focus, and ensuring your target elements are visible and within the viewport, you can solve most issues with the focus() method not working as expected.