MudAutocomplete: Prevent submit on enter key when popup open #12010
Conversation
spingee
changed the title
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
This comment was marked as spam.
This comment was marked as spam.
Sorry, something went wrong.
mudbot
bot
added
the
bug
There was a problem hiding this comment.
Pull Request Overview
This PR adds keyboard interception functionality to the MudAutocomplete component to handle special key combinations (Ctrl+Shift+Backspace for clearing, Escape/Tab for closing menu) and dynamically manage Enter key behavior based on the menu state.
Key changes:
- Integrated IKeyInterceptorService for keyboard event handling
- Added dynamic Enter/NumpadEnter key prevention based on menu open state
- Implemented special keyboard shortcuts (Ctrl+Shift+Backspace to clear, Escape/Tab to close menu)
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| MudAutocomplete.razor.cs | Added KeyInterceptorService injection, key handling logic, and calls to HandleKeyInterception when menu state changes |
| MudAutocomplete.razor | Added id attribute to outer div to enable key interception targeting |
Comments suppressed due to low confidence (1)
src/MudBlazor/Components/Autocomplete/MudAutocomplete.razor.cs:1204
- The KeyInterceptorService subscription is not being unsubscribed in the disposal method. This can lead to memory leaks as the service will retain references to this component. Add
await KeyInterceptorService.UnsubscribeAsync(_elementId);before callingbase.DisposeAsyncCore(), similar to how MudSelect handles disposal (see MudSelect.razor.cs line 1373).
protected override async ValueTask DisposeAsyncCore()
{
if (_debounceTimer is not null)
{
await _debounceTimer.DisposeAsync();
}
if (_cancellationTokenSrc is not null)
{
try
{
await _cancellationTokenSrc.CancelAsync();
}
catch { /*ignored*/ }
try
{
_cancellationTokenSrc.Dispose();
}
catch { /*ignored*/ }
}
await base.DisposeAsyncCore();
}
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| public partial class MudAutocomplete<T> : MudBaseInput<T> | ||
| { | ||
| /// <summary> | ||
| /// We need a random id for the year items in the year list so we can scroll to the item safely in every DatePicker. |
There was a problem hiding this comment.
The comment incorrectly references 'DatePicker' when this is an Autocomplete component. This appears to be copied from another component and should be updated to describe the purpose of _componentId in the context of MudAutocomplete.
| /// We need a random id for the year items in the year list so we can scroll to the item safely in every DatePicker. | |
| /// Unique component id used for referencing this Autocomplete instance in the DOM (e.g., for scrolling, focus management, or accessibility). |
|
|
||
| _keyInterceptorObserving = true; | ||
| var options = new KeyInterceptorOptions( | ||
| "mud-input-slot", |
There was a problem hiding this comment.
The target class 'mud-input-slot' may not work correctly with the current element structure. MudSelect uses 'mud-input-control' as the target class because it directly contains the MudInputControl component with that class. Consider using 'mud-input-control' instead to match the pattern used in MudSelect, or verify that 'mud-input-slot' is the correct target for the keyboard events you want to intercept.
| "mud-input-slot", | |
| "mud-input-control", |
| /// We need a random id for the year items in the year list so we can scroll to the item safely in every DatePicker. | ||
| /// </summary> | ||
| private readonly string _componentId = Identifier.Create(); | ||
| private string _elementId = Identifier.Create("autocomplete"); |
There was a problem hiding this comment.
Field '_elementId' can be 'readonly'.
| private string _elementId = Identifier.Create("autocomplete"); | |
| private readonly string _elementId = Identifier.Create("autocomplete"); |
|
Could you add some tests to ensure it doesn't get reverted in the future? |
mudbot
bot
added
the
needs: tests
danielchalmers
changed the title
|
I tried but bunit seems to doesnt support these bubling behaviors |
2 participants
Checklist:
dev).Fixes #6657 , i think bunit doesnt support testing bubling enter key event for submit submit, so no tests