Disabling Edge Autofill

💬 App Building
1

Hey folks :wave:

I'm having a similar issue to the following thread:

I'm building an internal app for administrators to manage internal users. I've not enabled the autofill interaction for any components.

However, on my "create user" and "edit user" pages which have email and password input boxes, Microsoft Edge is autofilling saved details for these boxes. This is not an issue with Chrome or Arc (I haven't tested in any other browser).

I've checked the page HTML to confirm that the autocomplete="off" attribute is present, but Edge seems to ignore this. I've also tried renaming the components and their data keys (but not the labels, since these need to remain user-friendly), but Edge is very persistently autofilling something on the page (e.g. if not the email box, then the name box, for example).

Are there any other workarounds you'd recommend to stop Edge from autofilling these boxes?

Similarly, can I also use this thread as a "feature request" to handle this behaviour for Edge, since it's an Edge-specific behaviour?

Thanks :v:

2

I found a couple things that might point you in the right direction to find a workaround for now:

I see. That behavior is beyond what is normally controlled by the autocomplete setting. Edge users can choose to turn off this setting in their browser settings, but I don't believe we as the web page creator can explicitly turn it off.

We can still rise to this challenge, though. Edge is taking a sneak peek at our HTML to try and automatically determine which input fields relate to personal info. If we can throw it off our scent, the behavior should stop. From my little bit of testing, Edge seems to be making this decision based off two criteria: the name / ID of the input element, and the proximity to words like "Phone Number" in the table.

To fix the latter, we can add dummy text in the middle of keywords like "name," "phone," and "email" then use CSS to hide the dummy text.
<td>First N<span class="hiddenSpan">x</span>ame Only</td>

there is also this SO post that says they were able to add aria-autocomplete="both" aria-haspopup="false" to the html element to disable it. since you don't have direct access to the html, youll need to use javascript and run it after the page loads:

const inputElements = document.querySelectorAll('input');

inputElements.forEach(input => {
  input.setAttribute('aria-autocomplete', 'both');
  input.setAttribute('aria-haspopup', 'false');
});
1 Like
3

Thanks @bobthebear for the suggestions! I'll give these a go -- just after I learn how to manipulate the HTML with JS :smile:

4

these docs might help out a bit.

There are 4 functions for getting html elements from the page any javascript runs on:

  • document.getElementById('idName')
    • Selects an element by its id attribute.
  • document.getElementsByClassName('className')
    • Selects a collection of elements by their class attribute.
  • document.getElementsByTagName('tagName')
    • Selects a collection of elements by their HTML tag name.
  • document.querySelector('selector')
    • Selects the first element that matches a CSS selector.
  • document.querySelectorAll('selector')
    • Selects all elements that match a CSS selector.

one thing to be sure you notice is how the 1st one is .getElement and the next 2 are .getElements.... can't tell you how often I've forgotten an s and spent an hour looking for an error that didn't exist.

so in the code I gave:

  • document.querySelectorAll('input'); will return a List/Array of <input> elements.
  • we then create a loop and for every <input> element found we first name this element input, then we call .setAttribute() on it to update the html element on the page. this will take an element like <input id=my_input_id> and update it to <input id=my_input_id aria-autocomplete="both" aria-haspopup=false>
  • this loop is the same as:
for(let i = 0; i < inputElements.length; i++){
  let input = inputElements[i];
  input.setAttribute('aria-autocomplete', 'both');
  input.setAttribute('aria-haspopup', 'false');
}
2 Likes
5

I finally got around to giving this a go, but I couldn't get the custom HTML attributes onto the input boxes :weary:

I created a global JS query which runs on page load whose content was your suggested code, as well as:

const inputElements = document.getElementsByTagName("input")

for (let input of inputElements) {
  input.setAttribute('aria-autocomplete', 'both');
  input.setAttribute('aria-haspopup', 'false');
}

...but in both cases, the inputElements is empty so nothing gets adjusted. Just to confirm, I also went into the browser inspector and confirmed that the <input ...> elements don't have the expected aria-* attributes :disappointed:

Thanks for the suggestion, though! I'll still tinker with it here and there to see if I can get anything else to work :thinking:

1 Like
6

Hi @BillWallis,

Apologies for the issue and thanks for testing out @bobthebear's solution.

Unfortunately DOM manipulation won't work in Retool as code execution is sandboxed and does not have access to any HTML components when the code runs :sweat:

I think the solution is to adjust the settings of Edge to tell it to not auto complete, since setting attributes on any HTML components will not stay.

I found from the Edge docs here some steps on disabling auto complete. Let me know if these work for you!

2 Likes