Skip to content

MudTextField: Fix Focus by ElementReference#11733

Merged
danielchalmers merged 3 commits intoMudBlazor:devfrom
versile2:fix_11690
Jul 30, 2025
Merged

MudTextField: Fix Focus by ElementReference#11733
danielchalmers merged 3 commits intoMudBlazor:devfrom
versile2:fix_11690

Conversation

@versile2
Copy link
Contributor

@versile2 versile2 commented Jul 29, 2025

Resolves #11690 and #11698
Removed HandleContainerClick method calling JavaScript focusInput with InputElementId from MudBaseInput.cs.
Deleted focusInput function from javascript to streamline focus handling.
Replaced HandleContainerClick method in MudTextField.razor.cs to manage focus using the built in textarea/input override of ElementReference.FocusAsync() requiring no external javascript.

Checklist:

  • The PR is submitted to the correct branch (dev).
  • My code follows the style of this project.
  • I've added relevant tests or tested on existing ones.

- Removed JavaScript focus invocation from `MudBaseInput.cs`.
- Updated `@onclick` syntax in `MudTextField.razor`.
- Added `HandleContainerClick` method in `MudTextField.razor.cs` to manage focus using C#.
- Deleted `focusInput` function from `mudInput.js` to streamline focus handling.
@github-actions github-actions bot added bug Unexpected behavior or functionality not working as intended refactor Reorganizes code and has no changes to the API or functionality in the main library labels Jul 29, 2025
@versile2 versile2 requested a review from Copilot July 29, 2025 21:21
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR improves focus handling in MudTextField by replacing JavaScript-based focus implementation with native Blazor ElementReference.FocusAsync(). The change removes the need for external JavaScript while maintaining the same focus functionality when clicking on text field containers.

  • Removed JavaScript focusInput function and related HandleContainerClick method from base class
  • Added new HandleContainerClick method in MudTextField that uses ElementReference.FocusAsync()
  • Updated razor template to use the new component-specific click handler

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File Description
src/MudBlazor/TScripts/mudInput.js Removes the focusInput JavaScript function that was handling focus via DOM manipulation
src/MudBlazor/Components/TextField/MudTextField.razor.cs Adds new HandleContainerClick method using ElementReference.FocusAsync() instead of JavaScript
src/MudBlazor/Components/TextField/MudTextField.razor Updates click handler reference to use the component-specific method
src/MudBlazor/Base/MudBaseInput.cs Removes the base HandleContainerClick method that relied on JavaScript

@sonarqubecloud
Copy link

@danielchalmers danielchalmers merged commit 8dca392 into MudBlazor:dev Jul 30, 2025
6 checks passed
@versile2 versile2 deleted the fix_11690 branch December 2, 2025 18:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Unexpected behavior or functionality not working as intended refactor Reorganizes code and has no changes to the API or functionality in the main library

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Input focus is misdirected when using duplicate HTML IDs

3 participants