Error 422 when attempting to log in with password manager

[ElDubsNZ]

When using a password manager to prefill the login fields and hit login, I get the following error:

Error: Error 422

But, if I copy paste from my password manager instead and hit login, it works perfectly fine.

I can have the password manager prefill, then add then delete a character from each field, and that works fine, as though it's now satisfied the field has been manually edited.

Very minor issue, but thought I'd report it anyway.

[DavidMStraub]

Thanks! Can you please specify Gramps.js version, Browser, Operating System, and Password Manager?

For me it works on v23.11.0/Firefox/Ubuntu/Firefox, but I am not surprised there are cases where it doesn't work as we have to "cheat" password managers with a hidden HTML form + Javascript, as they don't recognize forms in Shadow DOM (see #19). This workaround was copied from Home Assistant.

[ElDubsNZ]

Hi there, I attempted this on Chrome and Edge, on Windows 10, and with vaultwarden (through bitwarden's chrome/edge extension). I've tested with Home Assistant and it seems to be working fine on the same setup.

[RagingCub]

I have the same issue

[cmkrafft]

Can confirm, I'm encountering the same issue. Using Brave Version 1.61.109 Chromium: 120.0.6099.144 (Official Build) (64-bit)] and 1Password (browser plugin) version 2.18.2 on Manjaro.

[formatBCE]

Whew that gave me some bad minutes.
Same issue with Bitwarden.

[DavidMStraub]

Home Assistant (where the original polyfill was taken from) eventually gave up on the workarounds and implemented the login form without shadow DOM. We need something similar as well.

home-assistant/frontend#18015

[wvmscs]

Hello, I'd have the same problem with v24.2.1 and the password autofill on Safari 17.2.1 (on MacOS 14.2.1) and Safari on IOS 17.3.1.
After some investigate, I've found that the @change event was missing in the GrampsjsLogin.js webcomponent.
I've added the following to the tag v24.2.1 and its works on both MacOS and IOS. The correction is not complete, it could be necessary to update some other uses of mwc-textfield in this webcomponent.

diff --git a/src/components/GrampsjsLogin.js b/src/components/GrampsjsLogin.js
index 73d4b59..7bb21fd 100644
--- a/src/components/GrampsjsLogin.js
+++ b/src/components/GrampsjsLogin.js
@@ -103,6 +103,7 @@ class GrampsjsLogin extends GrampsjsTranslateMixin(LitElement) {
             id="username"
             label="${this._('Username')}"
             @input="${this._credChanged}"
+            @change="${this._credChanged}"
             value="${this.credentials.username || ''}"
           ></mwc-textfield>
           <mwc-textfield
@@ -112,6 +113,7 @@ class GrampsjsLogin extends GrampsjsTranslateMixin(LitElement) {
             label="${this._('Password')}"
             type="password"
             @input="${this._credChanged}"
+            @change="${this._credChanged}"
             value="${this.credentials.password || ''}"
           ></mwc-textfield>
           <mwc-button