jQuery Migrate 3.4.0 - elem.focus() is not working

[thambiduraidevmahendran]

Hello everyone,

We've recently upgraded our jQuery version from 2.2.3 to 3.6.0. In version 3.6.0, the elem.focus() method is deprecated. Since we've used .focus() in various parts of our website, I've opted to use jQuery Migrate, version 3.4.1.

During my work on the website, I encountered the following scenario:

HTML code:

html:

JS code: let parentElement = $('#parent'); let childElement = $('#child');

// When I tried to focus on the child element normally childElement.focus(); // It works fine, and the document's active element is also the child element. But after that, I hide and showed the parent element for a particular use case. After this manipulation, attempting to focus on the child element didn't work. Please see the code below for clarification:

javascript Copy code // First, I hide the parent element parentElement.hide();

// After some actions, I showed the parent element again parentElement.show();

// After the show/hide sequence, I tried to focus again childElement.focus(); // But the child element didn't receive focus. This is the issue. Could someone please assist with this? Thanks in advance.

[mgol]

Always update to the latest jQuery version within the major one you use; right now, this is 3.7.1. We fixed a lot of focus issues in 3.7.0 so it’s not worth trying to understand the issue before you try the latest version and see if the problem is still there. This might be issue https://github.com/jquery/jquery/issues/4950 but I’m not sure.

BTW, .focus() is deprecated, not removed. It’s just a simple alias of .trigger( "focus" ), it’s not related to issues you might have.

[thambiduraidevmahendran]

.trigger("focus") with jQuery does not produce the desired outcome for the above mentioned issue.

However, directly invoking childElement[0].focus()(native function) achieves the desired result.

[mgol]

.focus() on jQuery objects is literally an alias of .trigger( "focus" ); they are doing exactly the same things.