Clearing a TextBox after ValueChange

Radzen.Blazor Components
1

I want to clear my TextBox after it's Value changes. The way I implemented this is by binding the value of the text box to a variable and then setting the variable to an empty string in onChange. Like this:

<RadzenTextBox @bind-Value="messageContent" Change=@(args => onChange(args)) class="w-100" aria-label="Default TextBox" />

@code {
    string messageContent;

    private void onChange(string value)
    {
        messageContent = "";
    }

For some reason, this only works for the first time onChange is called. So how would I do this the correct way?

2

You can try with Blazor's :after triggers e.g. @bind-Value:after="@onChange"

On a side note why do you want to do that? Clearing the value of a textbox after the user types something in it looks as very bad UX.

3

Doing it with the :after trigger results in the same behaviour. And I want to clear the textbox because I am making something similar to a messenger where you can send a message and after sending it, it disappears from the textbox.

4

Hi,

I just implemented a similar bit today, and clearing the variable clears the textbox for me. I cannot reproduce your issue. My Change is a bit different than yours.. I'm not using the args variation since the bind-Value already contains the data.

image

image

5

My use case for clearing the text box, is for repeated data entry... The user inputs a value, hits enter to accept the value and is then able to enter another, and so on.

6

I made a very simple component to test this behaviour. It looks like this:

@page "/test"
@rendermode InteractiveServer
@using Radzen.Blazor
<h3>Component</h3>
<RadzenTextBox @bind-Value=_value Change="onTextBoxChange"></RadzenTextBox>

@code {
	string _value;

	private void onTextBoxChange()
	{
		_value = "";
	}
}

But it still only clears the textbox after the first change. I debugged it to see if the function gets called on every update (it does). But for some reason it doesn't do anything after the first change.

7

I see.... Your example also fails when I try it.

Another difference I noticed is that mine is not on a routable component, and am using my component in a dialog. In fact I'm using 2 RadzenTextBox components, and they clear when on the Change method calls by resetting the field. Try testing a non-routable component.

8

Indeed it changes only the first time. Not sure why. You can use the built-in InputText as a workaround:

<InputText class="rz-textbox" @bind-Value=_value @bind-Value:after="onTextBoxChange"></InputText>
@code {
	string _value;

	private void onTextBoxChange()
	{
		_value = "";
	}
}

UPDATE: I investigated that further and it seems the answer is in the Blazor framework. Just not sure how to utilize it yet.

1 Like
9

Now I'm confused :slight_smile:

How is it that my code works in its current form, but when I do it in another file as shown by the OP... it doesn't?

image
image1578×518 117 KB

Here's a screen recording that shows it working:

10

I have no clue either. Seems to be some Blazor internal specifics that I don't fully understand (check the PR I've linked before).