Trying to dynamically control background color for an RadzenAutoComplete control. (This works fine for a RadzenTextBox.) Definition:
<RadzenAutoComplete Data="@typelist" @bind-Value="i.typevalue" TextProperty="Name" Style="@((i.ValidationState & 8) != 0 ? "width:100%;background-color:salmon" : "width:100%")" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" @oninput="@((e)=>MarkReviewedAndValidate(i, "typevalue", e.Value?.ToString()))" FilterDelay="70" />
When ValidationState is 0, the control displays fine (white background) but when it's signaling invalid state, it looks like this:
(To me it looks like the background is being changed on the drop-down control, not the text box, which is preferred.)
Is there a way to do what I want here or is this a bug?
I don't understand what the problem is. Blazor validation applies a CSS class to invalid HTML elements. You can use that CSS class to tweak the appearance of everything as you need.
Are you referring to use of the Style attribute on RadzenAutoComplete? Doing this: Style="background-color:salmon" does as noted above and colors an area below the textbox, versus the textbox itself. The RadzenTextBox control behaves differently and colors the textbox as expected.
You can use your browser's developer tools to check how the AutoComplete and TextBox differ in rendering. You will see why the background color applies to a different element.
What do I do with that information, though? Should not the control itself render properly, given this is a basic styling issue? - nothing to do with validation. (I can reproduce the problem with simply saying Style="background-color:salmon" on any RadzenAutoComplete control.)
Are you saying that I need to manipulate the DOM manually to workaround the problem?
Again - please check the DOM tree of the AutoComplete and you will understand why the background applies on the wrapper element and not the input.
