Addons in combination with validations

[InzeNL]

Describe the bug
When adding validation to a field in an Addon, the combination of an AddonType.Body and an AddonType.End breaks when a validation message shows up. When the validation message is not there, it looks fine.

To Reproduce
https://github.com/InzeNL/Blazorise-Addon-Feedback

1. Create an <Addons> field with an AddonType.Body and an AddonType.End
2. In the AddonType.Body add an *Edit field (in my code example it's a TextEdit, but NumericEdit gives the same issue
3. Add validation to the *Edit field
4. When a validation message shows up in the Feedback field, the AddonType.End will hop to the line under that message. When there is no validation message, the AddonType.End shows correctly

Expected behavior
The validation message should always show up under the addons field, if that is where the *Edit element is placed

Screenshots

Additional context
Perhaps adding the possibility to add a Feedback element to the addons element would be a solutiono.

[stsrki]

You can add ValidationError anywhere inside of Validation. Feedback is mainly used to place it at the right place for the input. But addons are kinda different, so we need to adjust.

Try

<Validation Validator="@ValidateEventStartingDate">
    <Addons>
        <Addon AddonType="AddonType.Body">
            <DatePicker @ref="@startingDatePicker" TValue="DateTime?" InputMode="DateInputMode.Date" Date="@NewStreamEvent.StartingDate" DateChanged="@OnStartingDateChanged" DisplayFormat="dd-MM-Y" Disabled="@DisabledMode">
            </DatePicker>
        </Addon>
        <Addon AddonType="AddonType.End">
            <Button Color="Color.Light" Clicked="@(()=>startingDatePicker.ToggleAsync())">
                <Icon Name="IconName.CalendarDay" />
            </Button>
        </Addon>
        <ValidationError>@L["PleseSelectValidFutureStartingDateForEventDate"]</ValidationError>
    </Addons>
</Validation>

[InzeNL]

I changed my code to this:

<Validation Validator="ValidationRule.IsNotEmpty">
    <Addons>
        <Addon AddonType="AddonType.Body">
            <TextEdit Placeholder="Enter name">
                <Feedback>
                </Feedback>
            </TextEdit>
        </Addon>
        <Addon AddonType="AddonType.End">
            <AddonLabel>This is a label</AddonLabel>
        </Addon>
        <ValidationNone></ValidationNone>
        <ValidationSuccess></ValidationSuccess>
        <ValidationError>Enter valid name!</ValidationError>
    </Addons>
</Validation>

While the error message shows up correctly, with the AddonType.End in the right place, the AddonType.End does not have the expected rounded corners.

Trying to move the ValidationError outside of the Addons element does fix the rounded corners, but the message does not show up anymore

<Validation Validator="ValidationRule.IsNotEmpty">
    <Addons>
        <Addon AddonType="AddonType.Body">
            <TextEdit Placeholder="Enter name">
                <Feedback>
                </Feedback>
            </TextEdit>
        </Addon>
        <Addon AddonType="AddonType.End">
            <AddonLabel>This is a label</AddonLabel>
        </Addon>
    </Addons>
    <ValidationNone></ValidationNone>
    <ValidationSuccess></ValidationSuccess>
    <ValidationError>Enter valid name!</ValidationError>
</Validation>

[stsrki]

I don't that is wrong. The error is on an input element, not the label. So it is showing the border at the right place.

[InzeNL]

I would want the "This is a label" in the top picture to have rounded corners like the label in the bottom picture.
It doesn't do that because it's not the last element in the Addons section, which is how it should be expected.
Is there a way I can get the rounded corners on the label and show a ValidationError?

[stsrki]

You can see the same behavior on the Bootstrap documentation. https://getbootstrap.com/docs/5.0/forms/validation/

[InzeNL]

The difference between that and mine is that my label is an AddonType.End instead of an AddonType.Start

[Jimmys20]

@InzeNL is talking about theses corners:

which should be rounded:

@stsrki the class has-validation needs to be added to the input-group element when it contains validation feedback in order to be displayed correctly:

<div class="input-group has-validation">

From bootstrap documentation:

To fix issues with border radii, input groups require an additional .has-validation class.

Adding has-validation class to the Addons component is the solution:

<Validation Validator="ValidationRule.IsNotEmpty">
    <Addons Class="has-validation">
        <Addon AddonType="AddonType.Body">
            <TextEdit Placeholder="Enter name"></TextEdit>
        </Addon>
        <Addon AddonType="AddonType.End">
            <AddonLabel>This is a label</AddonLabel>
        </Addon>
    </Addons>
    <ValidationNone></ValidationNone>
    <ValidationSuccess></ValidationSuccess>
    <ValidationError>Enter valid name!</ValidationError>
</Validation>

[stormitornado]

unfortunately, .has-validation creates another bug

Solutions which I see here is:
to move .invalid-feedback outside of .input-group and show/hide it with JS,
or to use modern CSS features, like :has() with grid layout.