question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Input with clear - clicking on "Clear" makes the control to lose the focus

See original GitHub issue

Hello 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

  1. Input some text into the input control with the clear button
  2. press the clear button
  3. 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:closed
  • Created 2 years ago
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
MihailsKuzminscommented, Apr 19, 2021

@MihailsKuzmins sorry, I was preoccupied. But I see you have made the changes! Thanks a lot! I hope to see you contributing more often 🎆

@anddrzejb, no problems 😄. It was fun contributing to such a widely used and rapidly growing project. So thank you for this opportunity.

1reaction
MihailsKuzminscommented, Apr 17, 2021

@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 in OnInitialized() I don’t think that writing the focus logic in OnInitialized() is a good idea (will interfere with AutoFocus). Therefore, I extended the method “onClick” as it is implemented in Input.cs and I think it is a good way to handle it.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found