You cannot programmatically focus an element after you have attempted to focus it while it was hidden (display:none)

[JoolsCaesar]

Description

Possibly related to #4867, I have replicated this in version 3.5.1 and 3.6. The linked example below uses 3.6. I haven't tested Firefox, but both Chrome and Edge display this issue.

See the following example. There's a focusable div at the top, which has a handler to report (at the bottom of the example) the number of times it is focused. When you click the div, it is only ever focused programmatically, because a handler calls preventDefault() on the mousedown.

There is a button to toggle the visibility (display) of the focusable element, but before showing the element, it attempts to programmatically focus it.

Focusing a display:none element is not expected to work, but the issue is what follows.

Once the element is shown, no future attempt to focus the element will work.

HTML:

  <div id="hideable">
    <div id="focusable" tabindex="1">
      I am focusable
    </div>
  </div>
  <button id="button">
    Toggle visibility
  </button>
  <div id="output">
    Click "I am focusable" to focus. Click "Toggle visibility" to hide/show the focusable element
  </div>

JS:

const $button = $('#button');
const $focusable = $('#focusable');
const $hideable = $('#hideable');
const $output = $('#output');

let focusinCount = 0;
$hideable.on('focusin', function() {
  focusinCount++;
  $output.text('I felt that ' + focusinCount);
});

let visible = true;
$button.click(function() {
  if (visible) {
    $hideable.hide();
  } else {
    $focusable.focus(); // Comment out this to fix
    $hideable.show();
  }
  visible = !visible;
});

$focusable.on('mousedown', function(event) {
  event.preventDefault();
  $focusable.focus();
})

Link to test case

https://jsfiddle.net/JoolsCaesar/2o089jga/

[mgol]

Thanks for the report. This looks like a valid issue.

[jwmerrill]

I have bisected this problem to fe5f04d using the provided test case.

[jwmerrill]

It appears that commenting out this line

jquery/src/event.js

Line 577 in 4250b62

event.stopPropagation();

fixes the test case, but presumably that would cause other problems.

[fullermetric]

Thanks for this Joels.
The issue became more apparent after adding #focusable:focus { outline: 3px solid green; } to your test case.

Came here in an attempt to resolve some instances where using .focus() generates a keyup code of 13 (version 3.3.1)
In an attempt to resolve keycode generating on .focus I switched out 3.3.1 and tried jQuery versions 3.5 and 3.6 but found that .focus was not working at all ( as you pointed our why in your test case).

In the end, I switched back to 3.31 and now using .focus inside of a timeout

$(".tabs-stage #tab-1").addClass('hide'); $(".tabs-stage #tab-2").removeClass('hide'); $(".tabs-stage #tab-3").addClass('hide'); //fmp.triggeredOrdQtyFocus = 1; //$("#product-1").find("#product-qty").focus(); setTimeout(function(){ $("#product-1").find("#product-qty").focus(); },200);

[edg2s]

We discovered this same issue at Wikipedia (upstream issue: https://phabricator.wikimedia.org/T285626, minimal codepen: https://codepen.io/edg2s/pen/eYVbLOj)

This occurs in one dialog that we know of, but the nature of our dialogs means they are regularly hiding and showing content, and moving user focus, so accidentally focusing a hidden input is probably happening elsewhere.

[JoolsCaesar]

If anyone is desperate for a central workaround, you can use the following to ignore calls to focus() on hidden elements

var origFocus = $.fn.focus;
$.fn.focus = function(){
   if(arguments.length === 0 && !this.is(':visible')){
      return this;
   }else{
      return origFocus.apply(this, arguments);
   }
};

Disclaimer: Use at your own risk. Probably won't work if you have calls to .trigger('focus'), but you're an adult; figure it out.

[edg2s]

Event shorthands like $.fn.focus are deprecated, so trigger should be used instead. Internally focus will call trigger so if you patch trigger instead you will fix both methods.

[JoolsCaesar]

Does the API documentation need updating for that? I can't see any mention of it in the docs for focus or the deprecated functions page, though funnily enough, it does say that you should be careful to not call it on hidden elements for the sake of IE

Attempting to set focus to a hidden element causes an error in Internet Explorer. Take care to only use .focus() on elements that are visible.

https://api.jquery.com/focus/
https://api.jquery.com/category/deprecated/

[edg2s]

Probably! I've found the documentation on deprecations to be quite inconsistent. The deprecation of shorthands are mentioned in the release notes for 3.5: https://blog.jquery.com/2020/04/10/jquery-3-5-0-released/

P.S. I maintain an ESLint plugin for jQuery, part of which is configs targetting announced deprecations by version: https://github.com/wikimedia/eslint-plugin-no-jquery/blob/master/src/index.js#L128 - that might be a good place to scan if you are auditing the deprecation docs.

P.P.S Another useful link: https://github.com/jquery/api.jquery.com/issues

[edg2s]

Updated workaround using trigger:

var origTrigger = $.fn.trigger;
$.fn.trigger = function () {
	if ( arguments[ 0 ] === 'focus' ) {
		var args = arguments;
		return this.each( function () {
			var $this = $( this );
			if ( $this.is( ':visible' ) ) {
				origTrigger.apply( $this, args );
			}
		} );
	} else {
		return origTrigger.apply( this, arguments );
	}
};

[JoolsCaesar]

I maintain an ESLint plugin for jQuery
Nice, I'll check that out. Thanks!

[mgol]

Interesting; it looks like my PR #5223 fixes both test cases shared in this issue. Perhaps some edge cases were hitting the code path intended mostly for IE?

[mgol]

Fixed on main (future 4.x) via #5223 and on 3.x-stable via #5224.