Javascript - Input/text can't get focus (Chrome) - javascript

I'm doing a registry form, one of the validations is to check the database for existing username. To do that I open a php page in a separate hidden frame that checks the database and then calls a javascript funcion on the main frame to show an icon indicating if the user exists or not.
everything works fine, except in chrome that when the php page is open, the input/text loses focus and there's no way to get it back. I've tried calling focus on the element, using timeout as i've seen this solves similar issues in chrome, but nothing works so far...
any ideas?
Thanks.

Related

Why does my JavaScript event execute on any input, rather than input to the proper field in Chrome?

I have an event I want to execute on key down in an input field. It does as much in Firefox. In chrome, however, it executes the event (a redirect) when I give the page any input (click, key down, etc). I can't seem to figure out why. Any ideas?
Here's the javascript:
var yum = document.getElementById("username");
var form = document.querySelector("div.resp-wrapper form[name='register']");
form.setAttribute("autocomplete", "off");
yum.addEventListener("keydown", function handler() {
window.location.href = "https://giphy.com/gifs/troll-you-mad-face-eVy46EWyclTIA";
this.removeEventListener("keydown", handler);
});
This is the page I'm working on [Link Deleted]; you can see the problem there while it's live. I'll be removing this link eventually.
Oh I guess I should probably mention that this is an invisible form field (it's a honeypot). It's between the captcha and the last visible form field. You can run a test by clicking where the field would be and pressing any key.
UPDATE: I am able to reproduce on my Windows machine; chrome version 74.0.3729.131 (Official Build) (64-bit). On my android, the behavior is the same as well (touching anywhere on the page redirects me) - version 74.0.3729.136. But was not able to reproduce on my Mac chrome version 71.0.3578.98.
Figured it out; and, of course, it was something stupid. I removed the CSS from the form field and realized that, even though I had cleared my cache and browser history, several times, that didn't prevent Chrome's autofill feature from populating that field EVERY time.
When I removed the CSS I could see the field was always populated whenever I visited the page. Chrome had been filling in my email address (oddly, considering it's not an email field). I cleared my Chrome autofill settings and now the code works as expected. It's unfortunate that the autocomplete="off" attribute doesn't prevent this. I've read that usually this attribute is moot because the browser will override it anyway.

Ajax Catalog Events only working when Inspect Element Open

I have had https://github.com/czone-tech/magento2-ajaxified-catalog installed within a Magneto 2 store and its worked perfect for ages however suddenly stopped.
Strangely it works if i open inspect element. There are no errors shown in console and am unsure what would be the difference or cause different based on inspect element.
This is occurring if you navigate to a category like http://staging.buzzcateringsupplies.com/bar-supplies/bar-utensils/cocktail-utensils.html and select a filter on the side the page reloads. Try the same with inspect element open and the expected ajax behavior occurs. Is there anything anyone can suggest that would cause this?

Can't focus elements on load in Chrome - very weird bug (in Chrome?)

I have a very, very weird issue that only seems to be an issue in Chrome.
When a user comes on the website, the user cannot focus any element (via mouse click, if they focus it via tabbing, the elements don't get the 'focused' state either) and that's only an issue 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, as soon as focus is "enabled", the user can navigate/refresh with purging cache, etc., close the browser and open it again, and everything works normally - the elements get the 'focused' state normally.
This behaviour can only be reproduced in Chrome and not on localhost.
The difference between localhost and beta environment is:
beta env requires authentication (basic http auth)
files in development env are concated in a single JS and single CSS file and both are minimized
beta env includes hotjar, while there's no hotjar on localhost
There are no custom event listeners that would listen for the 'resize' event. There are no errors in console and all javascript that doesn't depend on focused element state gets executed correctly. Hover events and all CSS styling that depends on hovered state all work correctly.
The main issue is, that a form which has to be filled out and includes a datepicker, cannot be filled out and thus the users can't really interact with the page. Datepicker doesn't open and, as the input elements don't get the focused state, they don't visually change (CSS :focused selector isn't working either) and thus give the impression to the user that they cannot type in the normal text inputs (which works, after clicking on the input, it is possible to type in the input).
I have tried removing hotjar and the problem persisted. The only thing that made the problem go away was removing the basic auth, however, that is not an option in this stage (it's a closed beta test, so we need to limit the access only to the users with password).
I also find it extremely odd that basic auth would interfere with the focused state of elements, especially as the error persists after you refresh and only goes away as soon as you interact with browser itself (minimize, open new tab, do anything that resizes your browser window or document), after that it works correctly and there are no errors whatsoever.
The problem only started to appear recently, but I do not believe it's an issue with the app itself, as I tried rolling back to a couple months old build and the problem persists. All of that makes me believe it's a bug in Chrome, but what can be done to fix it?
EDIT: I also tried to add autofocus property to an input element and, in beta environment, it doesn't get focused.
So it seems it indeed is a Chrome bug that's present both on mobile (Android and iOS) Chrome browsers, as well as desktop Chrome browser (tested both on a Windows and a Mac). I submitted an official bug report. In the bug report, a fellow user made a website that's accessible only through basic auth and only has 2 basic inputs, the input should get a red border on focus. As expected, after opening the webpage in Chrome (for ease of use - incognito mode), the input doesn't get focus and the border doesn't change.
For those who are also affected by this bug in Chrome, you can track the bug progress 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, to make it somehow lose focus. You cannot use JS to minimize browser, cannot resize it, cannot open dev tools. What you can do, though, is open a new window. Of course, if you open a new window immediately, a pop-up blocker (as most people have it) will block it and the window itself (or rather your current tab) won't lose focus. Opening a new window can only be done as a reaction to a user event (without triggering potential pop-up blocker).
I also use some browser detection so the code will only be executed for Chrome and, using server-side conditioning, only for builds that include basic auth.
What the code does, quite self evidently, is that as soon as a user clicks on an input, it opens a new tab and quickly closes it, 1ms later. To prevent this from happening all the time, on every page load, sessionStorage, which gets cleared automatically after tabs from that domain are closed, is used (and we've already established that once focus starts working correctly, it will work as long as you keep your browser open).
The effect of this code is that the user will see a quick white flash the first time he clicks on the input, but everything will work correctly

IE11 and IFrame history object

We have an app with a list, that when a record is clicked a popup modal div is displayed, that is used to edit a user record. The div contains an iframe.
In the iframe, the user clicks save and the form is posted back, where server side validation occurs. If there is an error, the user is presented the error information and a go back button.
The go back button is wired to history.go(-1)
When it is clicked, in IE8/9/10 and Chrome, the iframe reverts back to the form with the user's changes still in it, allowing them to remedy any problems.
In IE11, it sends the parent page back to it's last page, so not only do you lose the div, but you lose the list.
Is there a way I can make IE11 behave like it was in IE10?
FWIW, we do perform basic client validation, such as checking for valid emails, mandatory fields etc, but we also do this in the backend, as well as checking that more complex rules to do with business relationships etc.
Thanks!
With IE11 finally going HTML5, you can save your history state so you would use push and popstate. Using this, you'll be able to control your "back" (working fine here).

Cursor appears before field loads on Mobile Safari

My web app includes a login button which dynamically adds a form to the DOM tree (with a username and password field) and sets the focus to the username field. It all works fine, however the cursor appears fractionally before the field has appeared on screen which I don't like. This being mobile Safari I can't put a setTimeOut on the focus command (the focus command must be in the function called by the users click, calling it from another function causes Safari to ignore it). I can't use a nasty delay as that also delays the loading of the form and the cursor still pops up before the field loads.
Anyone got any (preferably simple) ideas?

Categories