Focus() event does not work on the browser console

Question

Whenever I want to test something through the web I end up using the console browser (F12 > Console) to check some behaving, especially in the case of javascript. However, I recently noticed that the event .phocus() does not work as expected.

See the example below:

<input id="teste" type="text" id="teste" />

<br/><br/><br/>

<button onclick="document.getElementById('teste').focus()">teste</button>

If I click the button "test", the input will have focus, but if I type the same command that is in the onclick() in the console, nothing happens.

Faced with this, how to do the .focus() function and why this occurs?

Note: This is not just because of the snippet. If I try to do the same with the input Sopt’s research, nothing happens:

document.querySelector('.top-bar .searchbar input[type="text"].f-input').focus();

Answer 1

I believe it’s something related to "behavioural policies", the same occurs in Firefox as well as in Chrome.

When you are in Devtools (Chrome or Firefox console) the browser tab or window is not in focus and then any <input> or <textarea> will not receive focus, a simple test is to add a timeout in the Console, within the Sopt site itself open the console of your browser and type this:

setTimeout(function () {
    document.querySelector('.top-bar .searchbar input[type="text"].f-input').focus();
}, 5000);

You will have 5 seconds to return to the tab, then click anywhere on the site other than link, input or textarea and once the 5 seconds pass the input you will receive the focus.

Now do another test like this, but instead of leaving the tab in focus and type with setTimeout with 5 seconds again, wait 6 seconds leave the tab in focus, click on the tab and not on the page, you will notice that it will receive the focus too, ie elements "inputables" only receive focus when the tab or page is in focus.

See an example without timeout, if I click on the tab to focus it, but not on the "body" of the page, the input will already be "marked/flagged" to receive the focus when the tab is also in focus:

Answer 2

Because this is the way the browser works on the console (so much so that it ignores and returns Undefined®).

Whenever you run a command on the console, the focus will always be on the command line, waiting for the next command, ignoring any focus pointing to any element on the page.

However, if you run the command below and immediately click on any part of the page, the focus will work:

setTimeout(function(){document.getElementById('teste').focus()},5000);

Why?

Because you took the console focus and the command will run normally after 5 seconds.

---

Test here at Sopt:

Run the command below on the console (F12) and immediately click on any area of the page (blank, empty area) or close the console:

setTimeout(function(){document.querySelector('#search > input').focus();}, 5000);