Uncaught TypeError: Cannot read property 'nodeType' of null when calling .focus() on an empty jQuery selection

Answer to the core question

Calling $(selector).focus() on a jQuery object that contains no matched elements normally returns the empty set and does nothing. The TypeError: Cannot read property 'nodeType' of null you see is not an intentional jQuery API change. It originates from the focus‑dispatch path – either from a native focus() call that receives a null target or from a focus event handler that dereferences a removed element.

Likely explanation vs confirmed facts

• Likely explanation: A focus handler (either native or custom) is executed after the DOM mutation and attempts to read event.target or document.activeElement when the element has already been detached, yielding null and causing the nodeType lookup to fail.
• Confirmed fact (from jQuery 3.x source): jQuery.fn.focus itself does not throw on an empty set; it simply returns the set. The error therefore must come from the surrounding focus‑management logic.

Steps to fix this specific case

1. Guard the call:

   var $target = $(selector);
   if ($target.length) {
     $target.focus();
   }
   

   This prevents the exception and keeps the rest of the script running.
2. Verify the element is visible and enabled before focusing. A hidden display:none or aria-hidden="true" element can still match the selector but should not receive focus.

   if ($target.is(':visible') && !$target.is(':disabled')) {
     $target.focus();
   }
   

3. Provide a fallback landmark for accessibility. In modal dialogs or live regions, redirect focus to a stable container if the intended target is missing or hidden:

   var $fallback = $('#dialog-main');
   if ($target.length && $target.is(':visible')) {
     $target.focus();
   } else {
     $fallback.attr('tabindex', '-1').focus();
   }
   

4. Ensure any delegated focus event handlers are robust against removal. If you have handlers like $(document).on('focus', '.dynamic', handler), make sure handler checks that event.target is still in the DOM before accessing properties.
5. Run the code after the DOM mutation completes (e.g., in the callback of $.append or MutationObserver) to avoid race conditions where the element is removed before the focus call executes.

What this means for jQuery’s future

There is no public roadmap indicating that jQuery will change .focus() to silently ignore all edge cases. The current stable contract is: .focus() will throw if the underlying element is null or if a focus handler dereferences a removed node. Defensive guarding is the recommended practice.

Diagnostic detail that could alter the recommendation

Could you share the stack trace of the error? If it points to a custom focus handler rather than to the native focus() call, the fix may involve updating that handler to check for null before accessing properties.