Autofill not detecting dynamically loaded form in React application

[silverwind]

I have a single-page application based on React that has a pretty standard login form which on initial page load is detected and autofilled, here is the (reduced) HTML i see when inspecting while it works:

<form data-bitwarden-watching="1">
  <div>
    <input type="text" spellcheck="false" name="user" placeholder="Username" value="myusername" data-com.bitwarden.browser.user-edited="yes">
    <input type="password" spellcheck="false" name="pass" placeholder="Password" value="mypassword" data-com.bitwarden.browser.user-edited="yes">
    <button type="submit">Sign In</button>
  </div>
</form>

When I log in and then log out (which does not trigger a page reload), Bitwarden seems unable to autofill the same form a second time and I see HTML like this:

<form data-bitwarden-watching="1">
  <div>
    <input type="text" spellcheck="false" name="user" placeholder="Username" value="">
    <input type="password" spellcheck="false" name="pass" placeholder="Password" value="">
    <button type="submit">Sign In</button>
  </div>
</form>

data-bitwarden-watching is still there so it seems the form was detected but data-com.bitwarden.browser.user-edited is notably absent on both <input> elements.

I tested this in Firefox and Chrome, both seem equally affected. Triggering a page reload fills the form again, but for obvious reasons, I want to avoid this in a SPA. Is there anything I can do to this form to make it compatible with autofill?

[kspearrin]

Currently, the "autofill on page load" feature only works on page load. Not sure how else we could trigger the need to scan the page for autofills.

[silverwind]

I guess the only surefire way is to rescan the DOM in a low-frequency interval, let's say 3 seconds or less. Another less reliable way would be to scan after a popstate event (ideally debounced, with a short delay to let the page fully load), but that would not work in my current case as I leave the URL unchanged so a user can return to where they were after a login.

[silverwind]

Could also set up a MutationObserver to watch for any form being added to the DOM.

It may even work on initial page load if the observer is registered early enough (via content script run_at option "document_start"), thought that will probably need a bit of testing.

[dmikester1]

I found this thread via google. I am working with a site(Mayo Clinic portal login) where the form appears to be dynamically loaded into the DOM. I'm looking for any form filler/password manager that has an option to add a delay before trying to fill in the form. Even just a quarter or half second delay would be sufficient for the Mayo Clinic site I would think. I am currently using Avast's password manager and it usually gets the password filled but not the username. After I refresh a few times it sometimes gets both. So because of that, I am fairly certain it is a timing issue.

[eliykat]

Is this an issue with regular autofill, or with autofill on page load?

[silverwind]

The expectance would be that the page-load autofill picks up the same form a second time during the same session. There is no page load when a SPA draws a login form a second time.

No timeout would help in such a case, the autofiller would need to somehow identify the same form again, probably based on heuristics like when a certain percentage of form/field attributes match a already-filled form.

[bitwarden-bot]

Hi @silverwind, We're cleaning up our repositories in preparation for a major reorganization. Issues from last year will be marked as stale and closed after two weeks. If you still need help, comment to let us know and we'll look into it. Thanks!

[mattrossman]

I am still experiencing this issue. The context where I am experiencing it is multi-part forms. E.g. when logging in to QuickBooks Time the initial page only shows an account selector, which when clicked re-renders the app to present the password form. The data-bitwarden-watching attribute is present on the newly rendered form, but autofill is not triggered.

Could also set up a MutationObserver to watch for any form being added to the DOM.

I see a MutationObserver is currently in use here to detect form elements. Could this also be used to trigger autofill?