New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Component does not update DOM on a specific scenario #1737

Open
rodolfograve opened this Issue Nov 29, 2018 · 2 comments

Comments

Projects
None yet
2 participants
@rodolfograve

rodolfograve commented Nov 29, 2018

With the following component I'm trying to apply a transformation to the value in the input. The actual use case is more complicated and makes more sense but this is the simplest repro I could come up with.

Reproduction steps:

  1. Enter a lowercase string in the input, e.g. "asd"
  2. Result: the string in the input is turned into its uppercase equivalent and the Message is updated correctly.
  3. Enter the same lowercase string in the input. Notice that entering any other string works as expected.

Expected:
The string in the input is turned into its uppercase equivalent and the message is updated correctly.

Actual:
The string in the input remains unchanged and the message is updated correctly.

@page "/repro"
<input type="text" bind="@RawValue" />
<div>
    Message: @Message
</div>
@functions
{
    protected string Message { get; set; }
    protected int Count { get; set; }

    private string _rawValue;
    protected string RawValue
    {
        get => _rawValue;
        set
        {
            _rawValue = value?.ToUpperInvariant();
            Message = $"_rawValue was set to {_rawValue}. {Count++}";
            StateHasChanged(); // I don't think this is necessary but I've added it trying to solve the problem. It still doesn't work without this line.
        }
    }
}

It seems to me there is something wrong but please let me know if it's by design, in which case, could you also please explain how to achieve the behavior I want.

@enetstudio

This comment has been minimized.

enetstudio commented Nov 30, 2018

I believe this is by design, or at least this is how things are...

If you type the string "asd", the two-way binding mechanism store the uppercase string value "ASD" in the _rawValue variable, and update the value of the text box to the uppercase string value "ASD".
Now, when you erase "ASD" and type "asd", the value "asd" is turned into "ASD" once again, and assigned to _rawValue. Blazor sees that the new value is the same as the old value , which means that there is no need to update the text box...

@rodolfograve

This comment has been minimized.

rodolfograve commented Nov 30, 2018

Thanks @enetstudio. That makes sense to me. However, in this case, the end of your sentence should be "...except that there is" :-)

The actual use case is a currency input in which I convert symbols (like £) to ISO codes like GBP. This works beautifully except when you enter "gbp" (which gets transformed into "GBP") and then enter "£" (which doesn't get transformed into anything.

Any ideas on how to force Blazor to re-render the control?

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment