Unable to associate RadzenLabel with RadzenDropDown #878

New Issue

claunia · 2026-01-29T17:45:43Z

claunia commented

2026-01-29 17:45:43 +00:00

Originally created by @ikappas on GitHub (Jun 13, 2023).

Describe the bug

RadzenLabel association with RadzenDropDown does not work using "for" and "id" attributes.
Usage of the "for" and "id" attribute was suggested #912

To Reproduce

<RadzenLabel for="the_drop_down_id" Text="TheDropDownLabel" />
<RadzenDropDown id="the_drop_down_id" TValue="int?" />

Expected behavior

The emitted label should be associated with the input element.
Clicking on the Label should focus and expand the dropdown.

Additional context

The "id" attribute, when set on the RadzenDropDown component is emitted on the wrapper div instead of the input element which has no effect and breaks the association. The id attribute should be set on the nested input element.

<label for="the_drop_down_id" class="rz-label" id="3FRAQulmE0" _bl_121="">TheDropDownLabel</label>
<div class="rz-dropdown rz-state-empty" onmousedown="Radzen.activeElement = null" tabindex="0" id="dropdown" _bl_64="">
    <div class="rz-helper-hidden-accessible">
        <input id="the_drop_down_id" aria-haspopup="listbox" readonly="" type="text" tabindex="-1" aria-label="">
    </div>
    <label class="rz-dropdown-label rz-inputtext ">&nbsp;</label>
    <div class="rz-dropdown-trigger  rz-corner-right">
        <span class="rz-dropdown-trigger-icon  rzi rzi-chevron-down"></span>
    </div>
...
</div>

Originally created by @ikappas on GitHub (Jun 13, 2023). **Describe the bug** RadzenLabel association with RadzenDropDown does not work using "for" and "id" attributes. Usage of the "for" and "id" attribute was suggested #912 **To Reproduce** ``` razor <RadzenLabel for="the_drop_down_id" Text="TheDropDownLabel" /> <RadzenDropDown id="the_drop_down_id" TValue="int?" /> ``` **Expected behavior** 1. The emitted label should be associated with the input element. 2. Clicking on the Label should focus and expand the dropdown. **Additional context** The "id" attribute, when set on the RadzenDropDown component is emitted on the wrapper div instead of the input element which has no effect and breaks the association. The id attribute should be set on the nested input element. ```html <label for="the_drop_down_id" class="rz-label" id="3FRAQulmE0" _bl_121="">TheDropDownLabel</label> <div class="rz-dropdown rz-state-empty" onmousedown="Radzen.activeElement = null" tabindex="0" id="dropdown" _bl_64=""> <div class="rz-helper-hidden-accessible"> <input id="the_drop_down_id" aria-haspopup="listbox" readonly="" type="text" tabindex="-1" aria-label=""> </div> <label class="rz-dropdown-label rz-inputtext "> </label> <div class="rz-dropdown-trigger rz-corner-right"> <span class="rz-dropdown-trigger-icon rzi rzi-chevron-down"></span> </div> ... </div> ```

claunia closed this issue

2026-01-29 17:45:44 +00:00

claunia commented

2026-01-29 17:45:44 +00:00

@akorchev commented on GitHub (Jun 13, 2023):

By convention all html attributes are applied to the outermost HTML element.

@akorchev commented on GitHub (Jun 13, 2023): By convention all html attributes are applied to the outermost HTML element.

claunia commented

2026-01-29 17:45:44 +00:00

@ikappas commented on GitHub (Jun 13, 2023):

So how would someone associate the label with the dropdown?

@ikappas commented on GitHub (Jun 13, 2023): So how would someone associate the label with the dropdown?

claunia commented

2026-01-29 17:45:44 +00:00

@akorchev commented on GitHub (Jun 13, 2023):

It is not supported at the moment.

@akorchev commented on GitHub (Jun 13, 2023): It is not supported at the moment.

claunia commented

2026-01-29 17:45:45 +00:00

@DaveBagler commented on GitHub (Oct 28, 2023):

@akorchev, I was looking into the RadzenLabel's Component parameter and how it fills the for attribute of the label tag.

To me, it seems like this parameter overrides the for attribute in the case of a label (if you use both, the Component value is used, not the for value.), but the Component parameter is programmatically linked to a form field in the case of the field validation components within a template form.

Is that correct? Is there anything I'm missing regarding how the Component parameter operates?

Would you be open to a PR that updates the RadzenLabel so that the Component parameter is used for the for attribute unless the for attribute is set, in which case the attribute's value is used?

It's like how elements use the unique id unless the id attribute is used.

@DaveBagler commented on GitHub (Oct 28, 2023): @akorchev, I was looking into the `RadzenLabel`'s `Component` parameter and how it fills the `for` attribute of the `label` tag. To me, it seems like this parameter overrides the `for` attribute in the case of a label (if you use both, the `Component` value is used, not the `for` value.), but the `Component` parameter is programmatically linked to a form field in the case of the field validation components within a template form. Is that correct? Is there anything I'm missing regarding how the `Component` parameter operates? Would you be open to a PR that updates the `RadzenLabel` so that the `Component` parameter is used for the `for` attribute unless the `for` attribute is set, in which case the attribute's value is used? It's like how elements use the unique id unless the `id` attribute is used.

claunia commented

2026-01-29 17:45:45 +00:00

@DaveBagler commented on GitHub (Nov 2, 2023):

I've opened a PR for this issue: https://github.com/radzenhq/radzen-blazor/pull/1232

@DaveBagler commented on GitHub (Nov 2, 2023): I've opened a PR for this issue: https://github.com/radzenhq/radzen-blazor/pull/1232

claunia referenced this issue

2026-01-29 18:18:31 +00:00

[PR #878] Reset DataGrid in Settings.set #2371

Sign in to join this conversation.