fix(OtpInput): should show mask char in readonly/disabled status (#6212)

* refactor: 重构 DOM 使用 input 元素

* chore: 移除 console.log 语句

* refactor: 增加只读禁用逻辑

* style: 精简样式

* refactor: 格式化逻辑

* test: 更新单元测试

Author: ArgoZhang

src/BootstrapBlazor/Components/Input/OtpInput.razor

@@ -4,17 +4,8 @@
 <div @attributes="AdditionalAttributes" id="@Id" class="@ClassString">
     @for (var index = 0; index < Digits; index++)
     {
-        @if(IsReadonly || IsDisabled)
-        {
-            <span class="@ItemClassString">
-                @GetValueString(index)
-            </span>
-        }
-        else
-        {
-            <input type="@TypeString" class="@InputClassString"
-                    maxlength="@MaxLengthString" inputmode="@TypeModeString" placeholder="@PlaceHolder"
-                    value="@GetValueString(index)" />
-        }
+        <input type="@TypeString" class="@InputClassString"
+               maxlength="@MaxLengthString" inputmode="@TypeModeString" placeholder="@PlaceHolder"
+               value="@GetValueString(index)" readonly="@ReadonlyString" disabled="@DisabledString" />
     }
 </div>

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

@@ -39,11 +39,6 @@ public partial class OtpInput
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
-    private string? ItemClassString => CssBuilder.Default("bb-opt-item")
-        .AddClass("disabled", IsDisabled)
-        .AddClass(ValidCss)
-        .Build();
-
     private string? InputClassString => CssBuilder.Default("bb-opt-item")
         .AddClass("input-number-fix", Type == OtpInputType.Number)
         .AddClass(ValidCss)
@@ -68,6 +63,10 @@ public partial class OtpInput
         _ => null
     };
 
+    private string? ReadonlyString => IsReadonly ? "readonly" : null;
+
+    private string? DisabledString => IsDisabled ? "disabled" : null;
+
     private char[] _values = [];
 
     /// <summary>
@@ -99,7 +98,6 @@ protected override void OnParametersSet()
         return _values[index] != 0 ? _values[index] : null;
     }
 
-
     /// <summary>
     /// Trigger value changed event callback. Trigger by JavaScript.
     /// </summary>

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

@@ -50,6 +50,9 @@ export function init(id, invoke, method) {
         if (e.clipboardData && e.clipboardData.getData) {
             const pastedText = e.clipboardData.getData('text/plain');
             const inputs = [...el.querySelectorAll('.bb-opt-item')];
+            if (inputs.find(i => i.getAttribute('disabled') || i.getAttribute('readonly'))) {
+                return;
+            }
             for (const index in inputs) {
                 const input = inputs[index];
                 if (index < pastedText.length) {
@@ -67,7 +70,6 @@ export function init(id, invoke, method) {
 
 const setValue = (el, invoke, method) => {
     const val = [...el.querySelectorAll('.bb-opt-item')].map(input => input.value).join('');
-    console.log(val);
     invoke.invokeMethodAsync(method, val);
 }
 

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

@@ -21,11 +21,6 @@
             margin-right: var(--bb-opt-item-margin);
         }
 
-        &.disabled {
-            background-color: var(--bs-secondary-bg);
-            cursor: not-allowed;
-        }
-
         &[type] {
             padding: 0;
             text-align: center;

test/UnitTest/Components/OtpInputTest.cs

@@ -37,7 +37,7 @@ public void Readonly_Ok()
         });
 
         var item = cut.Find(".bb-opt-item");
-        Assert.Equal("<span class=\"bb-opt-item\"></span>", item.OuterHtml);
+        Assert.Contains("readonly=\"readonly\"", item.OuterHtml);
 
         cut.SetParametersAndRender(pb =>
         {
@@ -51,7 +51,7 @@ public void Readonly_Ok()
             pb.Add(a => a.IsDisabled, true);
         });
         item = cut.Find(".bb-opt-item");
-        Assert.Equal("<span class=\"bb-opt-item disabled\"></span>", item.OuterHtml);
+        Assert.Contains("disabled=\"disabled\"", item.OuterHtml);
     }
 
     [Fact]