pzuraq / liquid-wormhole

Animated wormholes, built on Liquid Fire! Inspired by ember-wormhole
MIT License
20 stars 20 forks source link

Password input causes Chrome error [DOM] Found elements with non-unique id #60

Open alexdiliberto opened 6 years ago

alexdiliberto commented 6 years ago

Here's the breaking diff by simply adding a password input type to the body of the liquid-wormhole in the Hello, World! initial example

diff --git a/tests/dummy/app/pods/index/template.md b/tests/dummy/app/pods/index/template.md
index 7478a37..9bdff04 100644
--- a/tests/dummy/app/pods/index/template.md
+++ b/tests/dummy/app/pods/index/template.md
@@ -10,6 +10,9 @@
   {{#if showHello}}
     {{#liquid-wormhole class="hello-world notification"}}
       Hello, World!
+      <form>
+        <input id="trigger-console-error" type="password">
+      </form>
     {{/liquid-wormhole}}
   {{/if}}
 </div>

Quick video showing the console error: http://recordit.co/cC7CPGgP1e

Since we clone DOM here with liquid-wormhole, the newly added <form> with its single password <input> triggers Chrome to throw a console error because now the newly added <input type="password"> is replicated X times in the DOM.

More information about the base Chrome error is explained here:

https://stackoverflow.com/questions/47806187/chrome-63-throws-dom-error-with-input-type-password-and-non-unique-ids