Can't focus items on load in Chrome - very strange error (in Chrome?)
I have a very, very strange problem that only seems to be a problem in Chrome. When the user comes to the website, the user is unable to focus any element (with a mouse click, if they tab focus on it, the elements also don't get the "focused" state) and this is only a problem in Chrome. That is, until the user resizes the window, minimizes the window, opens a new tab, opens developer tools, etc. Reloading the page does nothing. However, once the focus is "on", the user can navigate / update using the clear cache, etc. Close the browser and reopen it and everything works fine - items usually get a "focused" state.
This behavior can only be reproduced in Chrome, not localhost.
The difference between local and beta is as follows:
- beta env requires authentication (basic http auth)
- files in development env are instantiated in one JS and one CSS file and both are kept to a minimum.
- beta env turns on hotjar while there is no hojar on localhost
There are no custom event listeners that will listen for the 'resize' event. There are no errors in the console and all javascript that does not depend on the state of the focused element is executed correctly. Hover events and all CSS styles that depend on hovering all work correctly.
The main problem is that a form that needs to be filled out and includes a dumper cannot be filled out and therefore users cannot really interact with the page. The Datepicker does not open and, since input elements do not receive a focused state, they do not visually change (CSS selector: focused does not work) and thus gives the user the impression that they cannot enter normal text inputs (which works, after clicking on the input , you can enter the input).
I tried uninstalling hotjar and the problem persists. The only thing that made the problem go away was to remove the basic auth, however that is not an option at this point (this is a closed beta test, so we need to restrict access to only users with a password). I also find it extremely odd that basic auth would interfere with the lumped state of elements, especially since the error persists after refresh and only goes away as soon as you interact with the browser itself (minimize, open a new tab, do anything that resizes your window browser or document), after which it works correctly and no errors.
The problem only appeared recently, but I don't think it is a problem with the application itself as I tried to go back to building for a few months and the problem persists. All of this leads me to believe that this is a bug in Chrome, but what can be done to fix it?
EDIT: I've also tried adding an autofocus property to the input element, and in beta it doesn't focus.
source to share
It seems to be indeed a Chrome bug that is present on both mobile (Android and iOS) Chrome browsers and the Chrome browser desktop (tested on both Windows and Mac). I have submitted an official bug report. In the bug report, another user made a website accessible only through basic auth and only has 2 main inputs, the input should get a red border on focus. As expected, after opening a web page in Chrome (incognito mode for ease of use), the input does not receive focus and the border does not change.
For those also affected by this bug in Chrome, you can track the progress of the bugs here: https://bugs.chromium.org/p/chromium/issues/detail?id=740652
Meanwhile, here's a hacky solution for those interested:
$(document).on("ready", function() {
var $inputs = $("input");
$inputs.off("click.trick");
if (!sessionStorage.fixedChromeFocus) {
sessionStorage.fixedChromeFocus = "true";
$inputs.on("click.trick", function() {
var win = window.open("/", "_blank");
setTimeout(function() {win.close()}, 1);
$inputs.off("click.trick");
});
}
});
The goal is to somehow interact with the browser outside of the current page in order to somehow lose focus. You cannot use JS to minify the browser, you cannot resize it, and you cannot open developer tools. However, you can open a new window. Of course, if you open a new window right away, the popup blocker (like most people do) will block it and the window itself (or rather your current tab) won't lose focus. Opening a new window can only be done in response to a custom event (without triggering a potential popup blocker).
I also use some browser detection so the code will only execute for Chrome and using server side setup only for assemblies that include basic auth. What the code is doing, quite obviously, is that as soon as the user clicks on enter, it opens a new tab and quickly closes it, after 1ms. To prevent this from happening all the time, sessionStorage is used on every page load, which is automatically cleared after the tabs from that domain are closed (and we've already established that once focus starts working properly, it will work as long as you keep the browser open).
The effect of this code is that the user will see a quick white flash the first time they click on the input, but everything will work correctly
source to share