fix: Fix authcode paste from device (#853)

* docs: assign unique ID to examples * Revert "add console.logs (#850)" This reverts commit 755fdca. * fix: AuthCode paste fix * fix: bug when input is re-inputed * chore: updated version to 2.87.4
coingaming · Aug 27, 2024 · b73d848 · b73d848
1 parent 9cf24d3
commit b73d848
Show file tree

Hide file tree

Showing 13 changed files with 31 additions and 51 deletions.
diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-2.87.3
+2.87.4
diff --git a/assets/js/hooks/auth_code.js b/assets/js/hooks/auth_code.js
@@ -6,9 +6,9 @@ export default {
         this.hiddenField = this.el.querySelector('input[type="hidden"]');
         this.inputValues = this.inputs.map((input) => input.value);
 
-        // TODO: add support forms with re-render on "phx-change" event 
+        // TODO: add support forms with re-render on "phx-change" event
         this.hasFocusJump = !this.el.closest("form[phx-change]");
-        
+
         this.handleOnChange();
         this.handleOnKeydown();
         this.handleOnPaste();
@@ -17,44 +17,34 @@ export default {
     handleOnChange() {
         this.inputs.forEach((input, index) => {
             input.addEventListener("input", (event) => {
-                console.log(`Input event triggered on input index: ${index}`);
-
-                const value = event.target.value;
-                console.log(`Current input value: "${value}"`);
-
-                const nextInput = this.inputs[index + 1];
-                console.log(`Next input index: ${index + 1}`);
-
+                const value = event.data || event.target.value;
                 const pattern = input.getAttribute("pattern");
-                console.log(`Pattern for input: "${pattern}"`);
 
                 if (value.length > 1) {
-                    console.log(`Value length is greater than 1, truncating to first character`);
-                    event.target.value = value.charAt(0);
-                    if (nextInput !== undefined && this.hasFocusJump) {
-                        console.log(`Focusing next input index: ${index + 1}`);
-                        nextInput.focus();
-                    } else {
-                        console.log(`No next input to focus or hasFocusJump is false`);
+                    for(let i = index; i < this.inputs.length; i++) {
+                        const nextInput = this.inputs[i + 1];
+                        if (this.inputs[i] !== undefined) {
+                            this.inputs[i].value = value.charAt(i - index);
+                        }
+                        if (nextInput) {
+                            nextInput.focus();
+                        }
                     }
                 } else if (value.match(new RegExp(pattern, "gi"))) {
-                    console.log(`Value matches the pattern`);
+                    const currentInput = this.inputs[index];
+                    const nextInput = this.inputs[index + 1];
+                    if (currentInput !== undefined && currentInput.value.length > 1) {
+                      currentInput.value = currentInput.value.charAt(1);
+                    }
                     if (nextInput !== undefined && this.hasFocusJump) {
-                        console.log(`Focusing next input index: ${index + 1}`);
                         nextInput.focus();
-                    } else {
-                        console.log(`No next input to focus or hasFocusJump is false`);
                     }
                 } else {
-                    console.log(`Value does not match the pattern, clearing input`);
                     event.target.value = "";
                 }
-
                 event.preventDefault();
-                console.log(`Default action prevented`);
 
                 this.updateHiddenField();
-                console.log(`Hidden field updated`);
             });
         });
     },
@@ -83,51 +73,41 @@ export default {
     handleOnPaste() {
         this.inputs.forEach((input, index) => {
             input.addEventListener("paste", (event) => {
-                console.log(`Paste event triggered on input index: ${index}`);
-
                 const count = this.inputs.length - 1;
                 const lastInput = this.inputs[count];
 
                 const pastedValue = event.clipboardData.getData("Text");
-                console.log(`Pasted value: "${pastedValue}"`);
-
                 const pattern = input.getAttribute("pattern");
-                console.log(`Pattern for input: "${pattern}"`);
 
                 let currentInput = index;
                 let pastedCount = 0;
 
                 for (let i = 0; i < pastedValue.length; i++) {
                     const pastedCharacter = pastedValue.charAt(i);
-                    console.log(`Processing character: "${pastedCharacter}"`);
 
                     if (
                         pastedCharacter.match(pattern) &&
                         currentInput < this.inputs.length
                     ) {
                         this.inputs[currentInput].value = pastedCharacter;
-                        console.log(`Assigned character "${pastedCharacter}" to input index: ${currentInput}`);
                         currentInput++;
                         pastedCount++;
                     }
                 }
 
                 const nextInput = this.inputs[currentInput];
+
                 if (nextInput !== undefined) {
-                    console.log(`Focusing next input index: ${currentInput}`);
                     nextInput.focus();
                 } else {
-                    console.log(`No more inputs to focus. Focusing last input index: ${count}`);
                     lastInput.focus();
                 }
 
                 this.updateHiddenField();
-                console.log("Hidden field updated");
 
                 this.hiddenField.dispatchEvent(
                     new Event("input", { bubbles: true })
                 );
-                console.log("Dispatched 'input' event on hidden field");
 
                 event.preventDefault();
             });

diff --git a/lib/moon/design/form/auth_code/input.ex b/lib/moon/design/form/auth_code/input.ex
@@ -56,7 +56,7 @@ defmodule Moon.Design.Form.AuthCode.Input do
           ),
           "text-center"
         ]}
-        maxlength={1}
+        maxlength={@length}
         {=@type}
         autocomplete="off"
         placeholder={String.at(@placeholder, index)}

diff --git a/lib/moon_web/examples/design/form/auth_code_example/allowed_characters.ex b/lib/moon_web/examples/design/form/auth_code_example/allowed_characters.ex
@@ -8,7 +8,7 @@ defmodule MoonWeb.Examples.Design.Form.AuthCodeExample.AllowedCharacters do
 
   def render(assigns) do
     ~F"""
-    <AuthCode allowed_characters="numeric">
+    <AuthCode allowed_characters="numeric" id="numeric-authcode">
       <AuthCode.Input />
     </AuthCode>
     """

diff --git a/lib/moon_web/examples/design/form/auth_code_example/custom_length.ex b/lib/moon_web/examples/design/form/auth_code_example/custom_length.ex
@@ -8,7 +8,7 @@ defmodule MoonWeb.Examples.Design.Form.AuthCodeExample.CustomLength do
 
   def render(assigns) do
     ~F"""
-    <AuthCode length={4}>
+    <AuthCode length={4} id="custom-length-authcode">
       <AuthCode.Input />
     </AuthCode>
     """

diff --git a/lib/moon_web/examples/design/form/auth_code_example/default.ex b/lib/moon_web/examples/design/form/auth_code_example/default.ex
@@ -8,7 +8,7 @@ defmodule MoonWeb.Examples.Design.Form.AuthCodeExample.Default do
 
   def render(assigns) do
     ~F"""
-    <AuthCode>
+    <AuthCode id="default-authcode">
       <AuthCode.Input />
     </AuthCode>
     """

diff --git a/lib/moon_web/examples/design/form/auth_code_example/different_gaps.ex b/lib/moon_web/examples/design/form/auth_code_example/different_gaps.ex
@@ -9,10 +9,10 @@ defmodule MoonWeb.Examples.Design.Form.AuthCodeExample.DifferentGaps do
   def render(assigns) do
     ~F"""
     <div class="flex flex-col items-center gap-4">
-      <AuthCode>
+      <AuthCode id="different-gaps-authcode-1">
         <AuthCode.Input />
       </AuthCode>
-      <AuthCode class="gap-4">
+      <AuthCode class="gap-4" id="different-gaps-authcode-2">
         <AuthCode.Input />
       </AuthCode>
     </div>

diff --git a/lib/moon_web/examples/design/form/auth_code_example/disabled_state.ex b/lib/moon_web/examples/design/form/auth_code_example/disabled_state.ex
@@ -8,7 +8,7 @@ defmodule MoonWeb.Examples.Design.Form.AuthCodeExample.DisabledState do
 
   def render(assigns) do
     ~F"""
-    <AuthCode disabled>
+    <AuthCode disabled id="disabled-authcode">
       <AuthCode.Input />
     </AuthCode>
     """

diff --git a/lib/moon_web/examples/design/form/auth_code_example/error_state.ex b/lib/moon_web/examples/design/form/auth_code_example/error_state.ex
@@ -8,7 +8,7 @@ defmodule MoonWeb.Examples.Design.Form.AuthCodeExample.ErrorState do
 
   def render(assigns) do
     ~F"""
-    <AuthCode error>
+    <AuthCode error id="error-authcode">
       <AuthCode.Input />
     </AuthCode>
     """

diff --git a/lib/moon_web/examples/design/form/auth_code_example/hint_message.ex b/lib/moon_web/examples/design/form/auth_code_example/hint_message.ex
@@ -10,13 +10,13 @@ defmodule MoonWeb.Examples.Design.Form.AuthCodeExample.HintMessage do
   def render(assigns) do
     ~F"""
     <div class="flex items-center flex-col">
-      <AuthCode>
+      <AuthCode id="hint-authcode-1">
         <AuthCode.Input />
         <AuthCode.Hint>Hint message</AuthCode.Hint>
       </AuthCode>
     </div>
     <div class="flex items-center flex-col">
-      <AuthCode>
+      <AuthCode id="hint-authcode-2">
         <AuthCode.Input />
         <AuthCode.Hint>
           <Icon name="generic_info" />

diff --git a/lib/moon_web/examples/design/form/auth_code_example/password.ex b/lib/moon_web/examples/design/form/auth_code_example/password.ex
@@ -8,7 +8,7 @@ defmodule MoonWeb.Examples.Design.Form.AuthCodeExample.Password do
 
   def render(assigns) do
     ~F"""
-    <AuthCode type="password">
+    <AuthCode type="password" id="password-authcode">
       <AuthCode.Input />
     </AuthCode>
     """

diff --git a/lib/moon_web/examples/design/form/auth_code_example/placeholder.ex b/lib/moon_web/examples/design/form/auth_code_example/placeholder.ex
@@ -8,7 +8,7 @@ defmodule MoonWeb.Examples.Design.Form.AuthCodeExample.Placeholder do
 
   def render(assigns) do
     ~F"""
-    <AuthCode placeholder="123456">
+    <AuthCode placeholder="123456" id="placeholder-authcode">
       <AuthCode.Input />
     </AuthCode>
     """

diff --git a/lib/moon_web/examples/design/form/auth_code_example/with_form.ex b/lib/moon_web/examples/design/form/auth_code_example/with_form.ex
@@ -30,7 +30,7 @@ defmodule MoonWeb.Examples.Design.Form.AuthCodeExample.WithForm do
           error_class="self-center"
           hint_class="self-center"
         >
-          <AuthCode>
+          <AuthCode id="form-authcode">
             <AuthCode.Input />
           </AuthCode>
         </Field>