How to Turn Off Auto-Selection of Chart Series After Tab Switch (React Kendo UI)

[Viktoria]

Hi Telerik team,

I'm currently working with KendoReact Charts and noticed an unexpected behavior with series selection. Specifically, this happens with both Pie and Bar charts.

Issue

Whenever I:

1. Click anywhere inside the chart (any series),

2. Switch to another browser tab,

3. Return to the original tab,

— the first series gets auto-selected, and a black border appears around it.

What I’ve Tried

• I attempted to override :focus and .k-focus styles via CSS – didn’t help.

• Setting pointer-events: none on series did not prevent the behavior.

Reproduction

I’ve noticed the same issue in your official documentation examples too (see attached screenshot).
Also attaching a screenshot from my local app showing the same auto-selection border.

Question

How can I prevent KendoReact charts from auto-selecting or auto-focusing a chart series when returning to a tab?
Is there a prop or CSS workaround to completely disable this behavior?

Thanks in advance!

[Filip]

Hi, Viktoria,

Thank you for the provided screenshots and example.

I tested the documentation link and observed the behavior where the series is auto-selected. I attempted various custom approaches to work around this issue, such as programmatically forcing the Chart to blur and applying CSS tweaks. However, none of these solutions provided a satisfactory result. It appears that the black outline is added to the SVG, and unfortunately, there doesn't seem to be a known workaround at the moment. I can suggest subscribing to the official issue, we will update it once we have made any progress and this way you will receive a notification

• https://github.com/telerik/kendo-react/issues/3149

Please let me know in case further questions arise on this matter.

Regards,
Filip
Progress Telerik