Weird behavior of the label when SfDropDownList is inherited

[Julien Barach]

Hi,

I have a custom dropdown that inherits SfDropDownList.

Even without any customization, it has a weird behavior with the label not moving on the top of the input.

Please see the repro : https://blazorplayground.syncfusion.com/rthesthWBHTxzxQn

The first dropdown is the original and it behaves correctly.

The second is the custom dropdown. If you click on it you'll see the bug.

Regards.

[Mallesh Ravi Chandran]

The mentioned approach using does not render any UI because Blazor’s rendering mechanism does not support calling base.BuildRenderTree directly in Razor markup. The BuildRenderTree method is part of the low-level component rendering pipeline. It is invoked automatically by the Blazor renderer and cannot be executed manually in Razor syntax.

When a Razor component inherits from another component (for example, DropDownList), Blazor expects the derived component to either override the BuildRenderTree(RenderTreeBuilder builder) method in a C# code-behind class or define its own markup for composition. Razor syntax does not allow direct invocation of the base component’s render output. As a result, the component body remains empty or unwanted UI changes. 

The correct method to create a custom version of DropDownList is through composition, not inheritance. The composition model wraps the base control inside another Razor component and passes all desired parameters through. This pattern keeps the rendering logic within the supported Razor syntax and ensures the control remains functional, extendable, and compatible with updates in the Syncfusion library.

[ CustomDropdown.Razor ]

@typeparam TValue

@typeparam TItem

<SfDropDownList TValue="TValue"

                TItem="TItem"

                DataSource="DataSource"

                Placeholder="Placeholder"

                ShowClearButton="ShowClearButton"

                AllowFiltering="AllowFiltering"

                FloatLabelType="FloatLabelType">

</SfDropDownList>

@code {

    [Parameter] public IEnumerable<TItem>? DataSource { get; set; }

    [Parameter] public string? Placeholder { get; set; }

    [Parameter] public bool ShowClearButton { get; set; }

    [Parameter] public bool AllowFiltering { get; set; }

    [Parameter] public Syncfusion.Blazor.Inputs.FloatLabelType FloatLabelType { get; set; }

}

[ Index.razor ]

<SfDropDownList TValue="string" TItem="string" DataSource="listCombo" ShowClearButton="true" AllowFiltering="true" Placeholder="SfDropDown" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Auto" />

<CustomDropDown TValue="string" TItem="string" DataSource="listCombo" ShowClearButton="true" AllowFiltering="true" Placeholder="CustomDropDown" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Auto" />

@code {

    private List<string> listCombo = new List<string> { { "Apple" }, { "Banana" }, { "Kiwi" }, };

}

Sample : https://blazorplayground.syncfusion.com/rXVIWZrUHxdHQlIF

This component acts as a wrapper that passes all necessary parameters to an internal DropDownList.

[Julien Barach]

Hi,

We've inherited a lot of your components using this technique without any issues.

Even without an official recommandation, Microsoft says it's an acceptable workaround in some scenarios.

Hard to tell why it stopped working, looks like there are some js events that are not working well in this case.

By the way 31.2.5 fixed this floating label issue :

DropDown List

Bug Fixes

• #764619 - The performance issue that occurred when the floatLabelType was enabled in large applications has been resolved.
• #I770926 - Fixed an issue to ensure the popup is properly positioned upward during dynamic window resizing.
• #771578 - Fixed an issue in Floating Label Glitch on Initial Transition in DropdownList Component.

Regards.

[Mallesh Ravi Chandran]

Julien, Thank you for the update. Please let us know if you require further assistance.