Clear icon for text field

Radzen.Blazor Components
1

To make easier for user i want to add icon in text field to clear. How can this be done or can you add as feature in the future?

2

You can leverage the browser <input type=search> like this:

<RadzenTextBox type="search" />

image
image1188×608 29.9 KB

3

I tested and this works on Chrome and Edge on Windows. This setting does not work on iOS (iphone safari). You can fix on iOS using this:

input[type="search"]::-webkit-search-cancel-button {

  /* Remove default */
  -webkit-appearance: none;

  /* Now your own custom styles */
   height: 14px;
   width: 14px;
   display: block;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
  /* setup all the background tweaks for our custom icon */
  background-repeat: no-repeat;

  /* icon size */
  background-size: 14px;

}

I think a native solution would be more reliable.

4

I wonder how to trigger an event on Clear Icon click?

5

It is the same: DropDownDataGrid Clear Function - #2 by enchev

6

Thanks for the Swift reply. It is <RadzenTextBox type="search" . I will be doing autocomplete search and data will be bind in RadzenGrid. On clear icon click of RadzenTextBox, I have to Reset a Griddata. For this to happen I have to trigger an event on clear icon click of RadzenTextBox
image

7

Does this trick still work in the latest version? Doesn't seem to even on the editable demo pages here:

8

Yes, it should work.
text-clear

9

Ah, thanks. I didn't realize it needs to have a value to show up