Skip to content

fix(Input): prevent focus exception #6920

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 16, 2025
Merged

fix(Input): prevent focus exception #6920

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c5b782f
refactor: 移除 FocusElement 定义
ArgoZhang Oct 16, 2025
927d587
feat: 改用 focus 自定义方法
ArgoZhang Oct 16, 2025
af195ec
chore: bump version 9.11.3-beta02
ArgoZhang Oct 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/BootstrapBlazor/BootstrapBlazor.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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())
Expand Down
2 changes: 1 addition & 1 deletion src/BootstrapBlazor/Components/AutoFill/AutoFill.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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())
Expand Down
2 changes: 1 addition & 1 deletion src/BootstrapBlazor/Components/Input/BootstrapInput.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />;
}
7 changes: 7 additions & 0 deletions src/BootstrapBlazor/Components/Input/BootstrapInput.razor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import EventHandler from "../../modules/event-handler.js"

export function focus(id) {
const el = document.getElementById(id)
if (el) {
el.focus();
Copy link

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The focus function should handle cases where the element is not found or cannot be focused. Consider adding error handling or logging when the element doesn't exist or focus fails.

Suggested change
el.focus();
try {
el.focus();
} catch (err) {
console.error(`Failed to focus element with id '${id}':`, err);
}
} else {
console.warn(`Element with id '${id}' not found. Cannot focus.`);

Copilot uses AI. Check for mistakes.
}
}

export function clear(id) {
const el = document.getElementById(id)
if (el) {
Expand Down
7 changes: 1 addition & 6 deletions src/BootstrapBlazor/Components/Input/BootstrapInputBase.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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());
Copy link

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The FocusAsync method should handle potential JavaScript invocation failures. Consider wrapping in try-catch or returning a result indicating success/failure to maintain the async contract's reliability.

Copilot uses AI. Check for mistakes.

/// <summary>
/// Method to select all text
Expand Down
2 changes: 1 addition & 1 deletion src/BootstrapBlazor/Components/Input/FloatingLabel.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion src/BootstrapBlazor/Components/InputNumber/BootstrapInputNumber.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />;
}
2 changes: 1 addition & 1 deletion src/BootstrapBlazor/Components/Search/Search.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion src/BootstrapBlazor/Components/Textarea/Textarea.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Loading