PanelBar .k-focus

[Bohdan]

Hi Telerik Team,

I’ve noticed that in the PanelBar component, the element .k-link.k-selected receives the .k-focus class even when it’s clicked with the mouse.

This behavior causes a visible focus style to appear after mouse interactions.
For our design system, we’d like to preserve focus styling only when navigating via keyboard (Tab), not when clicking with the mouse.

Could you please advise if there’s a way to adjust or override this behavior without breaking the normal tab-focus functionality?

We are currently customizing Telerik React Kendo components to match our UI/UX requirements.

Thank you!

Regards,
Bohdan

[Filip]

Hello, Bohdan,

While the PanelBar currently does not expose a built-in mechanism for applying the focus styling only when navigating via the keyboard, I can suggest using CSS in order to scope the visuals to the container’s :focus-visible state. This approach will preserve keyboard navigation, but suppress the mouse-click focus. I have prepared a runnable example that showcases this approach in action:

• https://stackblitz.com/edit/react-dxspyc86-f17fvmhv?file=app%2Fstyles.css

Please let me know in case further questions arise on this matter and I will gladly assist.

Regards,
Filip
Progress Telerik