[Bug][Inputs] Focusable input suffix causes tab order disruption

[vveesseelliinnaa]

Description

When the suffix of a NumericTextBox can gain focus, the tab order does not always work as anticipated.

The issue occurs Implement a suffix-capable input (i.e. TextBox, NumericTextBox, or ComboBox) with the following conditions:

The suffix render contains a focusable element (i.e. a Button component or a span with a valid tab index)
The input component, or its parent, listens to the onBlur event and changes local state (triggering a re-render)

Plan

KendoReact Free

Steps To Reproduce

1. Go to https://stackblitz.com/edit/react-sahx44ph-fmb9zt1f?file=app%2Fapp.tsx
2. Start pressing Tab and observe that the blur counter will be updated when the suffix is focussed (before bluring the NumericTextBox components themselves)

Also, if the user clicks away before hitting Tab the second time, the input will retain the focus style even if another element gains focus (hit Tab in first element once, then clicked second input. Now both appear "focused":

Screenshots or video

No response

Actual Behavior

When focused on the input contents, hitting the Tab key will blur the input with no apparent focused element. Hitting Tab again will then focus the suffix element.

Expected Behavior

When focused on the input contents, hitting the Tab key should change focus to the suffix element.

Browser

Chrome

Browser version

latest

OS type

MacOS

OS version

No response

Last working version of the KendoReact package (if regression).

No response

Reported in Ticket ID: 1706042