Issues when nesting FormItems within a TabStripTab

[Nolz]

Hey,

I'm trying to build an edit screen for some rather complicated data. The data is complicated enough that putting the entire form on one page is quite unwieldy, so I decided to move parts of it to different tabs. Easier said than done apparently, because I'm running into an issue.

It looks like there is an issue when nesting FormItems within a TabStripTab. Here's a code sample to reproduce the issue;

<TelerikForm Model="@_model" OnValidSubmit="HandleValidSubmit">
    <FormItems>
        <TelerikTabStrip PersistTabContent="true">
            <TabStripTab Title="Tab 1">
                <FormItem Field="@nameof(_model.GenericLvl1)" LabelText="Generic lvl 1" />
            </TabStripTab>
            <TabStripTab Title="Tab 2">
                <FormItem Field="@nameof(_model.GenericLvl2)" LabelText="Generic lvl 2" />
                <FormItem Field="@nameof(_model.GenericLvl3)" LabelText="Generic lvl 3" />
            </TabStripTab>
        </TelerikTabStrip>
    </FormItems>
    <FormButtons>
        <TelerikButton ButtonType="ButtonType.Submit" ThemeColor="primary">Submit</TelerikButton>
        <TelerikButton ButtonType="ButtonType.Button" OnClick="Cancel">Cancel</TelerikButton>
    </FormButtons>
</TelerikForm>

When executed, this sample will render the following;

It appears the Generic lvl 2 field is being rendered outside of the TabStripTab. The tab itself appears empty, with the form fields it's supposed to contain appearing underneath it.

Clicking on Tab 2 then causes the fields it's supposed to contain to be placed underneath the field from Tab 1;

The fields from Tab 2 don't disappear when you click on Tab 1; they will stick around until the page is refreshed. This doesn't happen when PersistTabContent is disabled; the fields will still appear to be outside of the tab, but they do disappear when the tab is closed.

From my testing it seems that the moment a component is wrapped within a FormItem, it will be rendered outside of the tab it's supposed to be in. As another example, given this tab;

<TabStripTab Title="Tab 1">
    <FormItem>
        <Template>
            <TelerikTextBox @bind-Value=_model.GenericLvl1 Placeholder="Within FormItem"/>
        </Template>
    </FormItem>
    <TelerikTextBox @bind-Value=_model.GenericLvl2 Placeholder="Outside FormItem"/>
</TabStripTab>

I would expect both text boxes to appear in order and to be visually identical (except for the placeholder text). What actually happens is this;

It's admittedly been a few years since I last worked with Blazor and I've never used the Telerik UI components before, so perhaps I'm misunderstanding or overlooking something here. But to me this looks like a bug in the library.

Does anyone know why this happens? Is there a solution?

[Radko]

Hello Niels,

In general, whenever there is a tag whose name implies it expects items from a specific type, it is done so to take control over the rendering - such an example is the Grid, where within the tag GridColumns we expect columns and any other markup might lead to unexpected results. By unexpected results here I mean that the arbitrary markup will likely render before/after all the columns, rather than be nested between the two columns it was declared.

In the Form in particular, the FormItems tag expects FormItem and FormGroup tags only. This is necessary because the Form component itself controls its rendering, meaning it does not directly render any tags placed within the FormItems tag, rather than first collecting all instances of items and groups it needs to know about, after which renders an editor/group in the order the items/groups were collected. Arbitrary markup, if any, is not part of this rendering and is simply rendered as-is.

To override this behavior and take control over the entire rendering, including being able to declare custom arbitrary markup before/between/after individual form items, you can use the available templates. A more in-depth explanation is covered in the following article: Form Template for All Items.

Please look at the following Form - Templates Demo, where we have demonstrated something almost identical to what you are after - nesting form items within a TabStrip, all placed within a Form. It very well might serve as a base for your use case.

Regards,
Radko
Progress Telerik