Input with clear - clicking on "Clear" makes the control to lose the focus
See original GitHub issueHello guys. Thanks for the awesome Blazor components’ library. Would it be possible to take a look at the issue with the focus of Input after pressing the clear button?
Describe the bug
When an control has a property AllowCleat="true"
then pressing the clear button makes the input control to lose the focus. Therefore, in order to continue the input the control must be clicked one more time.
It would be nice if clicking on the close button preserved the focus in the input component.
Steps to reproduce (please include code)
https://antblazor.com/en-US/components/input#components-input-demo-Clear
- Input some text into the input control with the clear button
- press the clear button
- try typing something
the control has lost the focus and typing goes nowhere.
<Input
TValue="String"
AllowClear="true" />
Further technical details
- AntDesign Nuget Package version: 0.7.4
- Include the output of
dotnet --info
- The IDE (VS / VS Code/ VS4Mac) you’re running on, and it’s version: Visual studio
.NET SDK (reflecting any global.json):
Version: 6.0.100-preview.1.21103.13
Commit: b8a03527b2
Runtime Environment:
OS Name: Windows
OS Version: 10.0.19042
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\6.0.100-preview.1.21103.13\
Host (useful for support):
Version: 6.0.0-preview.1.21102.12
Commit: 9b2776d481
.NET SDKs installed:
3.1.403 [C:\Program Files\dotnet\sdk]
5.0.200-preview.21077.7 [C:\Program Files\dotnet\sdk]
5.0.201 [C:\Program Files\dotnet\sdk]
6.0.100-preview.1.21103.13 [C:\Program Files\dotnet\sdk]
.NET runtimes installed:
Microsoft.AspNetCore.All 2.1.26 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
Microsoft.AspNetCore.App 2.1.26 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 3.1.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.2 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 6.0.0-preview.1.21103.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 2.1.26 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.7 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.13 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.2 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 6.0.0-preview.1.21102.12 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 3.1.5 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 3.1.7 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 3.1.9 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 3.1.13 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.2 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.4 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 6.0.0-preview.1.21103.5 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
To install additional .NET runtimes or SDKs:
https://aka.ms/dotnet-download
Issue Analytics
- State:
- Created 2 years ago
- Comments:8 (8 by maintainers)
Top Results From Across the Web
ReactBits: Clearable Input with Autofocus | by Luis Guerrero
We are missing two things, to hide the clear button when the input loses the focus and keep the input focus when the...
Read more >Lost focus from input when click icon to clear it
The icon gets the focus on the mouse down, while the click event is fired on the mouse up. A "workaround", or rather...
Read more >How to catch the event of clicking the "Clear" button ...
1 Answer. The event fired when you press Enter after interacting with the input, or move away from the input so it loses...
Read more >Clear MultiSelect input when it loses focus andwhen ...
This function will clear all instances of the Multiselect inputs, so you don't have to specify separate selectors for each of them.
Read more >Clear Field on Focus
Example: I have a field “S” that comes up null in a web page, the user makes a mistake and instead of going...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@anddrzejb, no problems 😄. It was fun contributing to such a widely used and rapidly growing project. So thank you for this opportunity.
@anddrzejb, thanks for the input. It was exactly as I thought. I have prepared a PR #1377. Due to the fact that
InputPasswor.ToggleVisibility(MouseEventArgs args)
is called inOnInitialized()
I don’t think that writing the focus logic inOnInitialized()
is a good idea (will interfere withAutoFocus
). Therefore, I extended the method “onClick” as it is implemented in Input.cs and I think it is a good way to handle it.