fix(Input): prevent focus exception (#6920)

* refactor: 移除 FocusElement 定义

* feat: 改用 focus 自定义方法

* chore: bump version 9.11.3-beta02

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.11.3-beta01</Version>
+    <Version>9.11.3-beta02</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor

@@ -12,7 +12,7 @@
            data-bb-auto-dropdown-focus="@ShowDropdownListOnFocusString" data-bb-debounce="@DurationString"
            data-bb-skip-esc="@SkipEscString" data-bb-skip-enter="@SkipEnterString" data-bb-blur="@TriggerBlurString"
            data-bb-scroll-behavior="@ScrollIntoViewBehaviorString" data-bb-trigger-delete="true"
-           placeholder="@PlaceHolder" disabled="@Disabled" @ref="FocusElement"/>
+           placeholder="@PlaceHolder" disabled="@Disabled" />
     <span class="form-select-append"><i class="@Icon"></i></span>
     <span class="form-select-append ac-loading"><i class="@LoadingIcon"></i></span>
     @if (GetClearable())

src/BootstrapBlazor/Components/AutoFill/AutoFill.razor

@@ -14,7 +14,7 @@
            data-bb-auto-dropdown-focus="@ShowDropdownListOnFocusString" data-bb-debounce="@DurationString"
            data-bb-skip-esc="@SkipEscString" data-bb-skip-enter="@SkipEnterString"
            data-bb-scroll-behavior="@ScrollIntoViewBehaviorString"
-           placeholder="@PlaceHolder" disabled="@Disabled" @ref="FocusElement" />
+           placeholder="@PlaceHolder" disabled="@Disabled" />
     <span class="form-select-append"><i class="@Icon"></i></span>
     <span class="form-select-append ac-loading"><i class="@LoadingIcon"></i></span>
     @if (GetClearable())

src/BootstrapBlazor/Components/Input/BootstrapInput.razor

@@ -27,5 +27,5 @@ else
     @<input @attributes="@AdditionalAttributes" type="@Type" id="@Id" class="@ClassName"
             readonly="@ReadonlyString" disabled="@Disabled"
             placeholder="@PlaceHolder"
-            @bind-value="CurrentValueAsString" @bind-value:event="@EventString" @onblur="@OnBlur" @ref="FocusElement" />;
+            @bind-value="CurrentValueAsString" @bind-value:event="@EventString" @onblur="@OnBlur" />;
 }

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

@@ -1,5 +1,12 @@
 import EventHandler from "../../modules/event-handler.js"
 
+export function focus(id) {
+    const el = document.getElementById(id)
+    if (el) {
+        el.focus();
+    }
+}
+
 export function clear(id) {
     const el = document.getElementById(id)
     if (el) {

src/BootstrapBlazor/Components/Input/BootstrapInputBase.cs

@@ -19,11 +19,6 @@ public abstract class BootstrapInputBase<TValue> : ValidateBase<TValue>
         .AddClass(CssClass).AddClass(ValidCss)
         .Build();
 
-    /// <summary>
-    /// Gets or sets Element reference instance
-    /// </summary>
-    protected ElementReference FocusElement { get; set; }
-
     /// <summary>
     /// Gets or sets the placeholder attribute value
     /// </summary>
@@ -102,7 +97,7 @@ public abstract class BootstrapInputBase<TValue> : ValidateBase<TValue>
     /// Method to focus the element
     /// </summary>
     /// <returns></returns>
-    public async Task FocusAsync() => await FocusElement.FocusAsync();
+    public async Task FocusAsync() => await InvokeVoidAsync("focus", GetInputId());
 
     /// <summary>
     /// Method to select all text

src/BootstrapBlazor/Components/Input/FloatingLabel.razor

@@ -3,6 +3,6 @@
 @inherits BootstrapInputBase<TValue>
 
 <div class="@ClassString">
-    <input @attributes="@AdditionalAttributes" type="@Type" id="@Id" placeholder="@PlaceHolder" class="@ClassName" disabled="@Disabled" @bind-value="@CurrentValueAsString" @onblur="@OnBlur" @ref="FocusElement" />
+    <input @attributes="@AdditionalAttributes" type="@Type" id="@Id" placeholder="@PlaceHolder" class="@ClassName" disabled="@Disabled" @bind-value="@CurrentValueAsString" @onblur="@OnBlur" />
     <label for="@Id">@DisplayText</label>
 </div>

src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor

@@ -25,5 +25,5 @@ else
 
 @code {
     RenderFragment RenderInput =>
-    @<input @attributes="AdditionalAttributes" step="@StepString" min="@Min" max="@Max" id="@Id" type="number" placeholder="@PlaceHolder" class="@InputClassString" disabled="@Disabled" @bind-value="@CurrentValueAsString" @bind-value:event="@EventString" @onblur="@OnBlur" @ref="FocusElement" />;
+    @<input @attributes="AdditionalAttributes" step="@StepString" min="@Min" max="@Max" id="@Id" type="number" placeholder="@PlaceHolder" class="@InputClassString" disabled="@Disabled" @bind-value="@CurrentValueAsString" @bind-value:event="@EventString" @onblur="@OnBlur" />;
 }

src/BootstrapBlazor/Components/Search/Search.razor

@@ -29,7 +29,7 @@
                    data-bb-skip-esc="@SkipEscString" data-bb-skip-enter="@SkipEnterString" data-bb-blur="@TriggerBlurString"
                    data-bb-scroll-behavior="@ScrollIntoViewBehaviorString"
                    data-bb-input="@UseInputString"
-                   placeholder="@PlaceHolder" disabled="@Disabled" @ref="FocusElement" />
+                   placeholder="@PlaceHolder" disabled="@Disabled" />
             @if (IsClearable)
             {
                 <div class="search-clear-icon">

src/BootstrapBlazor/Components/Textarea/Textarea.razor

@@ -8,4 +8,4 @@
 }
 <textarea @attributes="AdditionalAttributes" placeholder="@PlaceHolder" id="@Id" class="@ClassName" disabled="@Disabled"
           @bind-value="CurrentValueAsString" @bind-value:event="@EventString" @onblur="@OnBlur"
-          data-bb-shift-enter="@ShiftEnterString" data-bb-scroll="@AutoScrollString" @ref="FocusElement"></textarea>
+          data-bb-shift-enter="@ShiftEnterString" data-bb-scroll="@AutoScrollString"></textarea>