From 28e675596bd325010cccd1a668c406e88dd64cc6 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Mon, 3 Jan 2022 22:30:56 +0100
Subject: [PATCH] web/flows: only add helper username input if using native
 shadow dom to prevent browser confusion

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 .../identification/IdentificationStage.ts     | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/web/src/flows/stages/identification/IdentificationStage.ts b/web/src/flows/stages/identification/IdentificationStage.ts
index 51c381df1..a383faba0 100644
--- a/web/src/flows/stages/identification/IdentificationStage.ts
+++ b/web/src/flows/stages/identification/IdentificationStage.ts
@@ -76,24 +76,28 @@ export class IdentificationStage extends BaseStage<
     firstUpdated(): void {
         this.form = document.createElement("form");
         document.documentElement.appendChild(this.form);
-        // This is a workaround for the fact that we're in a shadow dom
-        // adapted from https://github.com/home-assistant/frontend/issues/3133
-        const username = document.createElement("input");
-        username.setAttribute("type", "text");
-        username.setAttribute("name", "username"); // username as name for high compatibility
-        username.setAttribute("autocomplete", "username");
-        username.onkeyup = (ev: Event) => {
-            const el = ev.target as HTMLInputElement;
-            (this.shadowRoot || this)
-                .querySelectorAll<HTMLInputElement>("input[name=uidField]")
-                .forEach((input) => {
-                    input.value = el.value;
-                    // Because we assume only one input field exists that matches this
-                    // call focus so the user can press enter
-                    input.focus();
-                });
-        };
-        this.form.appendChild(username);
+        // Only add the additional username input if we're in a shadow dom
+        // otherwise it just confuses browsers
+        if (!("ShadyDOM" in window)) {
+            // This is a workaround for the fact that we're in a shadow dom
+            // adapted from https://github.com/home-assistant/frontend/issues/3133
+            const username = document.createElement("input");
+            username.setAttribute("type", "text");
+            username.setAttribute("name", "username"); // username as name for high compatibility
+            username.setAttribute("autocomplete", "username");
+            username.onkeyup = (ev: Event) => {
+                const el = ev.target as HTMLInputElement;
+                (this.shadowRoot || this)
+                    .querySelectorAll<HTMLInputElement>("input[name=uidField]")
+                    .forEach((input) => {
+                        input.value = el.value;
+                        // Because we assume only one input field exists that matches this
+                        // call focus so the user can press enter
+                        input.focus();
+                    });
+            };
+            this.form.appendChild(username);
+        }
         const password = document.createElement("input");
         password.setAttribute("type", "password");
         password.setAttribute("name", "password");