Google Chrome forces autofill on fields set autocomplete=
  • 05-Jun-2023
Lightrun Team
Author Lightrun Team
Share
Google Chrome forces autofill on fields set autocomplete=

Google Chrome forces autofill on fields set autocomplete=”off”

Lightrun Team
Lightrun Team
05-Jun-2023

Explanation of the problem

Disabling Chrome’s autocomplete functionality has posed a challenge for our application. We have encountered issues with setting the autocomplete attribute to “new-password” on the input element within the autocomplete__wrapper. The interference of Chrome’s autofill feature can be observed in the provided screencast, where the relevant autocomplete label is shown.

Upon investigation, we have found that Chrome deliberately disregards the autocomplete values “off” and “false”. Instead, Chrome treats “new-password” as a special clause specifically designed to prevent automatic filling of new password forms. This behavior deviates from the expected behavior of the autocomplete attribute. More information about this issue can be found in a Stack Overflow post at the following link: Stack Overflow post.

 

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

  • Instantly add logs to, set metrics in, and take snapshots of live applications
  • Insights delivered straight to your IDE or CLI
  • Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for: Google Chrome forces autofill on fields set autocomplete=”off”

 

To overcome the issue of Chrome’s autocomplete interfering with the desired behavior, we can implement a workaround by modifying the HTML structure or using JavaScript. One possible solution is to dynamically add and remove the input element within the autocomplete__wrapper. By toggling the presence of the input field, we can prevent Chrome from applying autofill.

Here’s an example of how this solution can be implemented using JavaScript:

 

<div class="autocomplete__wrapper">
  <!-- Original input element -->
  <input type="text" id="originalInput" autocomplete="new-password" />

  <script>
    // Get the autocomplete__wrapper element and the original input
    const wrapper = document.querySelector('.autocomplete__wrapper');
    const originalInput = document.getElementById('originalInput');

    // Create a new input element
    const newInput = document.createElement('input');
    newInput.type = 'text';
    newInput.id = 'newInput';
    newInput.autocomplete = 'new-password';

    // Replace the original input with the new input when the wrapper gains focus
    wrapper.addEventListener('focus', () => {
      wrapper.replaceChild(newInput, originalInput);
    });

    // Replace the new input with the original input when the wrapper loses focus
    wrapper.addEventListener('blur', () => {
      wrapper.replaceChild(originalInput, newInput);
    });
  </script>
</div>

 

By dynamically swapping the input elements, we ensure that the autocomplete functionality is only applied to the desired input field and not the autocomplete__wrapper itself. This approach can help mitigate the interference caused by Chrome’s autofill feature.

 

Other popular problems with accessible-autocomplete

 

Problem 1: Inaccessible Dropdown Menu

One common issue with accessible-autocomplete is the lack of keyboard accessibility in the dropdown menu. When navigating through the options using keyboard input, users may encounter difficulties in selecting an option or even identifying the focused option due to inadequate keyboard navigation support.

To address this problem, we can enhance the keyboard accessibility of the dropdown menu by incorporating proper keyboard event handling and focus management. Here’s an example of how we can improve the keyboard navigation in the dropdown menu:

 

const dropdownMenu = document.getElementById('autocompleteDropdown');

// Handle keyboard events for the dropdown menu
dropdownMenu.addEventListener('keydown', (event) => {
  const currentOption = document.activeElement;

  // Handle arrow key navigation
  if (event.key === 'ArrowDown') {
    event.preventDefault();
    const nextOption = currentOption.nextElementSibling;
    if (nextOption) {
      nextOption.focus();
    }
  } else if (event.key === 'ArrowUp') {
    event.preventDefault();
    const prevOption = currentOption.previousElementSibling;
    if (prevOption) {
      prevOption.focus();
    }
  }

  // Handle selection on Enter key press
  if (event.key === 'Enter') {
    event.preventDefault();
    currentOption.click();
  }
});

 

By adding event listeners and appropriate keyboard navigation logic, we can ensure that users can easily navigate the dropdown menu using their keyboards, select options, and trigger actions.

Problem 2: Limited Accessibility Support

Another challenge with accessible-autocomplete is its limited support for assistive technologies such as screen readers. Users who rely on screen readers may encounter difficulties in understanding the autocomplete functionality, identifying the available options, and receiving proper feedback.

To improve the accessibility support, we need to enhance the markup and provide additional ARIA attributes to convey the autocomplete behavior effectively. Here’s an example of how we can enhance the accessibility of accessible-autocomplete:

 

<input
  type="text"
  id="autocompleteInput"
  aria-autocomplete="list"
  aria-expanded="false"
  aria-owns="autocompleteDropdown"
  autocomplete="off"
/>

<ul id="autocompleteDropdown" role="listbox" aria-labelledby="autocompleteInput">
  <li role="option" tabindex="-1">Option 1</li>
  <li role="option" tabindex="-1">Option 2</li>
  <li role="option" tabindex="-1">Option 3</li>
</ul>

 

By using appropriate ARIA roles, properties, and states, we ensure that screen readers can properly interpret and announce the autocomplete functionality, the options available in the dropdown menu, and the current state of the component.

Problem 3: Styling and Customization Limitations

One limitation of accessible-autocomplete is the limited flexibility in terms of styling and customization. The default appearance may not align with the project’s design requirements, making it challenging to integrate seamlessly into the existing user interface.

To overcome this limitation, we can leverage the provided CSS classes and customize the styles accordingly. Here’s an example of how we can modify the appearance of accessible-autocomplete:

 

.ac-dropdown {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ac-item {
  padding: 8px;
  cursor: pointer;
}

.ac-item:hover {
  background-color: #ebebeb;
}

.ac-item.selected {
  background-color: #d9d9d9;
}

 

By targeting the specific CSS classes used by accessible-autocomplete, we can apply custom styles to match the desired look and feel of the autocomplete component. This allows for better integration with the overall design of the application and improves the user experience.

 

A brief introduction to accessible-autocomplete

accessible-autocomplete is a JavaScript library designed to provide an accessible and user-friendly autocomplete functionality for input fields. It offers a simplified way to implement autocomplete features with built-in accessibility support, making it easier for developers to create inclusive web applications. The library focuses on keyboard navigation, ARIA compliance, and assistive technology compatibility to ensure that users with disabilities can effectively interact with the autocomplete component.

Under the hood, accessible-autocomplete leverages modern web technologies such as HTML, CSS, and JavaScript to create a seamless user experience. It utilizes event handling and DOM manipulation techniques to capture user input, fetch relevant suggestions from a data source, and display them in a dropdown menu. The library also incorporates ARIA attributes and roles to communicate the autocomplete behavior to screen readers and assistive devices, ensuring that users relying on these technologies can understand and utilize the autocomplete functionality effectively.

With its technical foundation and emphasis on accessibility, accessible-autocomplete empowers developers to enhance the usability and inclusivity of their web applications. By providing a well-structured and accessible autocomplete solution out of the box, the library simplifies the implementation process and allows developers to focus on integrating the component seamlessly into their projects, without compromising accessibility standards.

 

Most popular use cases for accessible-autocomplete

 

  1. Enhancing Input Field Autocomplete: accessible-autocomplete can be used to enhance the autocomplete functionality of input fields in web applications. By integrating the library into a project, developers can provide users with a more efficient and user-friendly way to enter data by suggesting relevant options as they type. The library handles the logic of fetching suggestions from a data source and displaying them in a dropdown menu, making it easy to implement autocomplete features with minimal effort. The following code snippet demonstrates a basic usage of accessible-autocomplete:

 

import accessibleAutocomplete from 'accessible-autocomplete';

accessibleAutocomplete({
  element: document.querySelector('#myInput'),
  source: ['Apple', 'Banana', 'Orange'],
});

 

  1. Ensuring Accessibility Compliance: One of the key benefits of accessible-autocomplete is its focus on accessibility. The library follows best practices for web accessibility, ensuring that users with disabilities can effectively interact with the autocomplete component. It incorporates ARIA attributes and roles to communicate the autocomplete behavior to assistive technologies. By using accessible-autocomplete, developers can contribute to creating more inclusive web applications that can be easily navigated and understood by users with disabilities.
  2. Customization and Integration: accessible-autocomplete offers flexibility for customization and integration into various projects. Developers can customize the appearance and behavior of the autocomplete component to align with the overall design and requirements of their application. The library provides hooks and callbacks that allow developers to add additional logic and functionality, such as handling selected suggestions or filtering the available options based on specific criteria. This versatility enables developers to tailor accessible-autocomplete to fit their specific use cases and seamlessly integrate it into new or existing projects.

 

Share

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications.

Try Lightrun’s Playground

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.