Skip to content

docs: minor language improvements to why-my-autofill-doesnt-work.mdx #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jeremiahlee wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs: minor language improvements to why-my-autofill-doesnt-work.mdx #20

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 11 additions & 14 deletions docs/user/faq/why-my-autofill-doesnt-work.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
---
title: Why can't I use autofill ?
title: Why can't I use autofill?
description: Why Passbolt autofill doesn't work on some website.
hide_table_of_contents: false
---

import Figure from '@site/src/components/Figure/Figure';

Autofill is a useful feature that helps you save time by giving quick access to the appropriate password when you're on a website, and by automatically filling in the login information for you.
However, for this to work, Passbolt needs to detect a login form on the webpage you're visiting. It does this by analyzing the HTML code and looking for specific selectors that indicate “this is the username field” and “this is the password field”.
The selectors passbolt search for are defined bye the [W3C web-standards.](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill)
Autofill is a useful feature that saves you time by giving quick access to the appropriate password when you're on a website and automatically filling in the login information for you. Passbolt does this by analyzing the webpages you visit for [specific HTML attributes](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) that indicate “this is the username field” and “this is the password field”.

## How to verify ?
## How to verify?

You can check which selectors are used on a webpage by right-clicking on the username or password input field and selecting **Inspect**.

Expand All @@ -21,7 +19,7 @@ You can check which selectors are used on a webpage by right-clicking on the use
size={{ width: '400px', height: '550px' }}
/>

You will then see the HTML source code of the webpage. What matters here is the section related to the input field. In this example, Passbolt is able to detect the input field because the `name` and `id` attributes follow W3C web standards for form autofill.
You will then see the HTML source code of the webpage. What matters here is the section related to the input field. In this example, Passbolt is able to detect the input field because the `name` and `id` attributes follow the HTML standard for form autofill.

<Figure
src="/img/help/2025/08/email-field-inspect.png"
Expand Down Expand Up @@ -49,18 +47,17 @@ However, the password input field uses an `id` that is recognized by Passbolt, s
/>


## What about Shadow DOM or iFrames?
## What about shadow DOM and inline frames?

Some websites embed login forms inside [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) or `<iframe>` elements.
These techniques are commonly used for encapsulation or third-party content. Unfortunately, due to browser security limitations, Passbolt cannot access or interact with fields inside shadow roots or iframes. As a result, autofill will not work on these types of pages.
Some websites embed login forms inside [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) or `<iframe>` elements.
These techniques are used for encapsulation or third-party content. Unfortunately, autofill will not work on these pages because browser security controls prevent Passbolt from accessing and interacting with form fields inside shadow roots or inline frames.

## What are my possibilities ?
## What can I do to fix th?

You can contact the website's support or development team and ask them to adjust the login form to make them autofill compatible, for example by using standard field names or IDs that follow the [W3C web-standars.](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill)
You can contact the website's support or development team and ask them to adjust the login form to use the [HTML standard’s recommendations for autocompletion](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).

## More info

You can find the list of supported [selector here.](https://github.com/passbolt/passbolt_styleguide/blob/master/src/react-web-integration/lib/InForm/InFormFieldSelector.js)
If autofill isn't triggered even though you're on a login page, it usually means the login form uses selectors that Passbolt does not recognize.
You can find the list of supported [selector here.](https://github.com/passbolt/passbolt_styleguide/blob/master/src/react-web-integration/lib/InForm/InFormFieldSelector.js) If autofill isn't triggered on a login form, it usually means the login form uses selectors that Passbolt does not recognize.

We know that unsupported website poses a strain on our client, and our backlog is actively working on improving this functionnalities in passbolt. (ref. PB-39112)
We know that unsupported websites are frustrating and are working to improve this functionality in Passbolt. (ref. PB-39112)