Under Review
Last Updated: 30 Jul 2022 09:08 by ADMIN
Created on: 28 Jul 2022 18:48
Type: Bug Report
DropDownButton aria-label reads [object Object] when text property is set to a React.Node

We are currently passing a React.Node which contains both text and custom icons to the DropDownButton text property. The automatically generated aria-label of the DropDownButton returns [object Object] instead of any recognizable text.

Steps to Reproduce:

  • Create a DropDownButton with text property set to a React.Node - eg:
<DropDownButton text={<div>test text</div>}>
  • Inspect the DropDownButton aria-label value using the developer console

Expected Result:

aria-label contains the text inside the React.Node

aria-label="test text dropdownbutton"

Actual Result:

aria-label contains [object Object]

aria-label="[object Object] dropdownbutton"


1 comment
Konstantin Dikov
Posted on: 30 Jul 2022 09:08

Hi Andrew,

Thank you for contacting us.

I have tested the scenario and I was able to observe the problem. I can confirm that this is a bug with the implementation and my guess is that when the aria-label was added, it was not considered that the "text" is actually a ReactNode and it can contain more than a simple string value. I have logged an item for this in our repository, where you can follow its progress:

Until a fix is provided, you can try the following workaround:

For bringing the issue to our attention, you will find your Telerik Points updated.

Please excuse us for any inconvenience caused by this and if we can assist you with anything else, do not hesitate to contact us again.


Konstantin Dikov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.