RadzenDropDown expand arrow does not open/close the dropdown when wrapped in a label element #532

Closed
opened 2026-01-29 17:38:48 +00:00 by claunia · 1 comment
Owner

Originally created by @deadlydog on GitHub (Sep 7, 2022).

Describe the bug
When the RadzenDropDown control is wrapped within a <label> element, clicking on the expand arrow does not do anything. If the dropdown is not expanded, clicking it will expand the dropdown for a few milliseconds before it closes again. If the dropdown is already expanded, clicking the expand arrow will not close the dropdown.

To Reproduce
Steps to reproduce the behavior:

  1. Create a <RadzenDropDown /> control.
  2. Wrap it in a <label> ... </label> element.
  3. When running the application, click on the little expand arrow on the drop down; it will not work as expected.

Expected behavior
Interacting with the dropdown should work the same as when it is not wrapped in a <label> element; The expand arrow should expand the dropdown as usual.

Video showing reproduction

https://user-images.githubusercontent.com/1187140/188762024-9fc65594-4ec5-43db-b39c-5c7c8b546a2e.mp4

Sample Code

You can use this sample code in a vanilla Blazor Server application to easily reproduce this issue:

<label>
	Values:
	<RadzenDropDown TValue="string" Data="@values" />
</label>

@code {
	public IEnumerable<string> values = new List<string>()
	{
		"These", "are", "some", "values"
	};
}

Desktop:

  • OS: Windows 10
  • Browser: Firefox v104.0.1 and Chrome v105.0.5195.102
  • Radzen.Blazer NuGet package version: 3.20.10
  • .NET 6

Additional context
Add any other context about the problem here.

Originally created by @deadlydog on GitHub (Sep 7, 2022). **Describe the bug** When the `RadzenDropDown` control is wrapped within a `<label>` element, clicking on the expand arrow does not do anything. If the dropdown is not expanded, clicking it will expand the dropdown for a few milliseconds before it closes again. If the dropdown is already expanded, clicking the expand arrow will not close the dropdown. **To Reproduce** Steps to reproduce the behavior: 1. Create a `<RadzenDropDown />` control. 2. Wrap it in a `<label> ... </label>` element. 3. When running the application, click on the little expand arrow on the drop down; it will not work as expected. **Expected behavior** Interacting with the dropdown should work the same as when it is not wrapped in a `<label>` element; The expand arrow should expand the dropdown as usual. **Video showing reproduction** https://user-images.githubusercontent.com/1187140/188762024-9fc65594-4ec5-43db-b39c-5c7c8b546a2e.mp4 **Sample Code** You can use this sample code in a vanilla Blazor Server application to easily reproduce this issue: ```razor <label> Values: <RadzenDropDown TValue="string" Data="@values" /> </label> @code { public IEnumerable<string> values = new List<string>() { "These", "are", "some", "values" }; } ``` **Desktop:** - OS: Windows 10 - Browser: Firefox v104.0.1 and Chrome v105.0.5195.102 - Radzen.Blazer NuGet package version: 3.20.10 - .NET 6 **Additional context** Add any other context about the problem here.
Author
Owner

@deadlydog commented on GitHub (Sep 7, 2022):

Awesome, thanks for the super quick turnaround on this 👏 😊

@deadlydog commented on GitHub (Sep 7, 2022): Awesome, thanks for the super quick turnaround on this 👏 😊
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#532