Hi,
I am trying to set the tabindex property of a KendoReact form I am developing. The form uses a FieldSet and Fields for the form inputs. Most rendered controls seem to ignore the tabindex property of a field. Normal inputs seem to respect that. However, DatePicker, DropDownList, and AutoComplete seem to ignore the property and set tabindex=0 on the generated output regardless of the index I set.
I have created a stackblitz with a simplified version of the form to show the behavior: https://stackblitz.com/edit/react-ifxfxg?file=src%2FNavMenu.jsx
Using KendoReact v4.7.0 both locally and on stackblitz.
1 Answer, 1 is accepted
Hello, Ali,
This is expected as the listed components do not have a tabindex prop. The Field components will pass all of their props down to the used component. If that component has that prop in its API, it will receive and use it.
For the other components, we have to use a custom FormComponent. That component will internally set the tabindex to the required element based on the props.
I made an example of how it can be done for the DatePicker. The approach for the other components is similar:
https://stackblitz.com/edit/react-67gmts?file=app%2Fmain.jsx
Regards,
Stefan
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Hi Stefan,
If I have to create custom components for a standard html property, what's the point of using KendoReact? Might as well just create my own html components without Kendo.
BTW, TabIndex is listed in DropDownListProps API, so at least DropDownList and AutoComplete should support it.
Hello, Ali,
The DropDownList will receive the tabIndex as it is indeed part of its supported API:
https://stackblitz.com/edit/react-67gmts-8ffnuw?file=app%2Fmain.jsx
We agree that sometimes it may seem like making modifications for a single HTML attribute is strange but this is the main reason. Most of our components are complex ones (made from multiple HTML elements). If we have to expose all HTML attributes on all of these elements this will create a very large and difficult-to-use API. This is why we try to expose the most common attributes and then the developer has a customization option to add others.
The main point of KendoReact is to speed up the development time. This still means that the developer may need to add custom elements or attributes to achieve all requirmenemts. Our goal is to allow developers to make let's say a DatePicker with modifications faster and easier than making it from scratch.
Rank 1
Hi Stefan,
Thank you for your prompt response.
I would argue that tabIndex is one of the "most common attributes" in use. It's one of the dozen or so HTML Global Attributes, and is fundamental for any decent user experience.
KendoReact does support it in the Inputs (text, numeric, etc) although it's not properly documented in the API. The other types of "data-entry" components should (IMHO) also support it, if only for the sake of consistency and providing good user experience.
Hello, Ali,
Yes, I completely agree that the tabIndex is a very commonly used property and we should have it for the Form components.
I have logged a task to add it for the DateInput components (DateInput, DatePicket, etc):
https://github.com/telerik/kendo-react/issues/1072