feat(OtpInput): use input instead of keydown event

src/BootstrapBlazor.Server/docs.json

@@ -259,7 +259,8 @@
     "select-region": "SelectRegions",
     "select-city": "SelectCities",
     "select-province": "SelectProvinces",
-    "hik-vision": "HikVisions"
+    "hik-vision": "HikVisions",
+    "embed-pdf": "EmbedPDFs"
   },
   "video": {
     "table": "BV1ap4y1x7Qn?p=1",

src/BootstrapBlazor/Components/Input/OtpInput.razor.cs

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
@@ -104,9 +104,9 @@ protected override void OnParametersSet()
     /// <param name="val"></param>
     /// <returns></returns>
     [JSInvokable]
-    public Task TriggerSetValue(string val)
+    public Task TriggerSetValue(string[] val)
     {
-        SetValue(val);
+        SetValue(string.Join("", val.Select(i => string.IsNullOrEmpty(i) ? " " : i)));
         return Task.CompletedTask;
     }
 }

src/BootstrapBlazor/Components/Input/OtpInput.razor.js

@@ -2,47 +2,40 @@ import EventHandler from '../../modules/event-handler.js'
 
 export function init(id, invoke, method) {
     const el = document.getElementById(id);
-    let triggerKeydown = false;
+    const totalInputs = [...el.querySelectorAll('.bb-otp-item')];
 
-    EventHandler.on(el, 'beforeinput', '.bb-otp-item', e => {
-        if (triggerKeydown) {
-            return;
-        }
-
-        processKey(el, e, e.data);
-    });
     EventHandler.on(el, 'input', '.bb-otp-item', e => {
         const isNumber = e.target.getAttribute('type') === 'number';
-        if (isNumber && e.target.value.length > 1) {
-            e.target.value = e.target.value.slice(1, 2);
+        let value = e.target.value;
+        if (value.length > 1) {
+            value = value.slice(1, 2);
         }
-        setValue(el, invoke, method);
-    });
-    EventHandler.on(el, 'keydown', '.bb-otp-item', e => {
-        if (e.ctrlKey) {
+
+        if (isNumber && "0123456789".indexOf(value) === -1) {
+            e.target.value = '';
             return;
         }
 
-        if (e.key.charCodeAt(0) === 0) {
+        if ("abcdefghijklmnopqrstuvwxyzABCDEDFGHIJKLMNOPQRSTUVWXYZ0123456789".indexOf(value) === -1) {
+            e.target.value = '';
             return;
         }
-        triggerKeydown = true;
-        processKey(el, e, e.key);
-    });
-    EventHandler.on(el, 'keyup', '.bb-otp-item', e => {
-        const input = event.target;
-        const value = e.key;
 
-        if (value === 'Backspace' || value === 'ArrowLeft') {
-            setPrevFocus(el, input);
+        e.target.value = value;
+
+        if (value.length === 1) {
+            setNextFocus(el, e.target);
         }
-        else if (value === 'ArrowRight') {
-            setNextFocus(el, input);
+        setValue(el, invoke, method);
+    });
+    EventHandler.on(el, 'keydown', '.bb-otp-item', e => {
+        if (e.key === 'Backspace' || e.key === 'ArrowLeft') {
+            setPrevFocus(el, e.target);
         }
-        else if (value === 'Delete') {
-            setFocus(input);
+        else if (e.key === 'ArrowRight') {
+            setNextFocus(el, e.target);
         }
-    })
+    });
     EventHandler.on(el, 'focus', '.bb-otp-item', e => {
         if (e.target.select) {
             e.target.select();
@@ -72,7 +65,7 @@ export function init(id, invoke, method) {
 }
 
 const setValue = (el, invoke, method) => {
-    const val = [...el.querySelectorAll('.bb-otp-item')].map(input => input.value).join('');
+    const val = [...el.querySelectorAll('.bb-otp-item')].map(input => input.value);
     invoke.invokeMethodAsync(method, val);
 }
 
@@ -98,38 +91,13 @@ const setFocus = target => {
         if (target.focus) {
             target.focus();
         }
-    }, 0);
-}
-
-const processKey = (el, event, value) => {
-    const skipKeys = ['Enter', 'Tab', 'Shift', 'Control', 'Alt', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Delete'];
-    const input = event.target;
-    const isNumber = input.getAttribute('type') === 'number';
-
-    if (skipKeys.indexOf(value) > -1) {
-
-    }
-    else if (isNumber) {
-        if ("0123456789".indexOf(value) > -1) {
-            setNextFocus(el, input);
-        }
-        else {
-            event.preventDefault();
-        }
-    }
-    else if ("abcdefghijklmnopqrstuvwxyzABCDEDFGHIJKLMNOPQRSTUVWXYZ0123456789".indexOf(value) > -1) {
-        setNextFocus(el, input);
-    }
-    else {
-        event.preventDefault();
-    }
+    }, 10);
 }
 
 export function dispose(id) {
     const el = document.getElementById(id);
     EventHandler.off(el, 'input');
     EventHandler.off(el, 'keydown');
-    EventHandler.off(el, 'keyup');
-    EventHandler.off(el, 'beforeinput');
     EventHandler.off(el, 'focus');
+    EventHandler.off(el, 'paste');
 }

test/UnitTest/Components/OtpInputTest.cs

@@ -90,7 +90,10 @@ public async Task TriggerSetValue_Ok()
             });
         });
 
-        await cut.InvokeAsync(() => cut.Instance.TriggerSetValue("234567"));
+        await cut.InvokeAsync(() => cut.Instance.TriggerSetValue(["2", "3", "4", "5", "6", "7"]));
         Assert.Equal("234567", v);
+
+        await cut.InvokeAsync(() => cut.Instance.TriggerSetValue(["", "3", "4", "5", "6", "7"]));
+        Assert.Equal(" 34567", v);
     }
 }