SfTextBox CssClass not working

[Eric Holland]

This is very similar to your sample which works when checking a validation rule for each keystroke oninput. Here, I check only after focus is lost. The CssClass properly changes - I can see it show up as rendered text in

tag, but the border does not change to match.

@page "/busted"

CssClass is: @CssClass

Busted

@code {

string _bindingValue = "";

public string bindingValue

{

get { return _bindingValue; }

set

{

if (value.Length < 3)

CssClass = "e-error";

else

CssClass = "e-success";

_bindingValue = value;

StateHasChanged();

}

}

public string CssClass { get; set; } = "e-success";

}

[Ponmani Murugaiyan]

Hi Eric, 

 

Greeting from Syncfusion support. 

 

We have validated your reported query. We have prepared sample as per your requirement. Please find the code snippet and sample below for reference.  

 

[Index.razor] 

 

<EditForm Model="@User"> 

    <DataAnnotationsValidator /> 

    <div asp-validation-summary="All" class="text-danger"></div> 

    <div class="form-group"> 

        <SfTextBox Placeholder='Enter value' Blur="onBlur" CssClass="@CssClass" @bind-Value="@User.ID"></SfTextBox> 

        <ValidationMessage For="@(() => User.ID)" /> 

    </div> 

    <button type="submit" class="btn btn-primary">Submit</button> 

</EditForm> 

 

@code { 

    public string CssClass { get; set; } 

 

    public Customer User = new Customer(); 

 

    public class Customer 

    { 

        [Required(ErrorMessage = "Value is required")] 

 

        public string ID { get; set; } 

 

    } 

    public void onBlur(FocusOutEventArgs args) 

    { 

        if (args.Value.Length <= 0) 

        { 

            CssClass = "e-error"; 

        } 

        else 

        { 

            CssClass = "e-success"; 

        } 

        this.StateHasChanged(); 

    } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1653459760  

 

Kindly check with the above sample. If issue still exists in your end, please get back us with issue reproducing sample, we will assists you further. 

 

Regards, 

Ponmani M 

[Jeremy]

Hi Syncfusion,

I was about to create a new forum post but this one is very similar.

There is a big difference between your example and the code from the OP - and that is they default the value of CssClass while you do not, ie

public string CssClass { get; set; } = "e-success";

versus

public string CssClass { get; set; } 

What I have found is that if you define a default value for this property, the binding does not work. Now matter how many times I update the property CssClass (using OnInput as per your sample from https://blazor.syncfusion.com/documentation/textbox/how-to/change-the-color-of-the-textbox-based-on-its-value/) the background colour doesnt change.

Why would I want to default the background colour? Because I want the background colour of my text box to be "e-error" when first loaded, and then to be calculated as the user makes changes. 

So I get the same result as the original question ... if you set a value a default for the CssClass property (or even if you do it in the OnInitializedAsync) then no further changes to the bound property are reflected in the text box.

Thanks,

Jeremy

[Ponmani Murugaiyan]

Hi Andrey, 

We have confimed the reported issue as bug in our end.  We will include the fix for this issue in one of the upcoming patch release, which is expected to be rolled on August 19, 2020 . You can track the status of this issue using below feedback link. 

Feedback Link : https://www.syncfusion.com/feedback/16748/  

We appreciate your patience until then. 

Regards, 

Ponmani M 

[Juan Montoya]

This is already fixed update to the latest version.

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Juan,

We are glad to hear that your issue has been resolved. Please let us know if you need any assist regarding this.

Regards,  

Jeyanth.