Add the TabIndex parameter to the input components (#235)

* chore(combobox): add tabindex

* chore(dateinput): add the tabindex

* chore(datepicker): add the tabindex

* chore(datetimepicker): add the tabindex

* chore(numerictextbox): add the tabindex

* chore(multiselect): add the tabindex

* chore(autocomplete): add the tabindex

* chore(timepicker): add the tabindex

* chore(daterange): add the tabindex

Author: svdimitr

components/autocomplete/overview.md

@@ -84,6 +84,8 @@ The AutoComplete is a generic component and its type is determined by the type o
 
 * `Width` - the width of the main element. @[template](/_contentTemplates/inputs/inputs-width-template.md#inputs-width-information)
 
+* `TabIndex` - maps to the `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key.
+
 * Templates - they allow you to control the rendering of items in the component. See the [Templates]({%slug autocomplete-templates%}) article for more details.
 
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article for more details.

components/combobox/overview.md

@@ -106,6 +106,8 @@ The ComboBox is a generic component and its type is determined by the type of th
 
 * `Width` - the width of the dropdown and the main element. @[template](/_contentTemplates/inputs/inputs-width-template.md#inputs-width-information)
 
+* `TabIndex` - maps to the `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key.
+
 * Templates - they allow you to control the rendering of items in the component. See the [Templates]({%slug components/combobox/templates%}) article for more details.
 
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article for more details.

components/dateinput/overview.md

@@ -39,11 +39,19 @@ The <a href="https://www.telerik.com/blazor-ui/date-input" target="_blank">Blazo
 >caption The date input provides the following features:
 
 * `Class` - the CSS class that will be rendered on the `input` element.
+
 * `Enabled` - whether the `input` is enabled.
+
 * `Format` - the date format that the user input must match. Read more in the [Supported Formats]({%slug components/dateinput/supported-formats%}) article.
+
 * `Id` - renders as the `id` attribute on the `<input />` element, so you can attach a `<label for="">` to the input.
+
 * `Value` - get/set the value of the input, can be used for binding.
+
 * `Width` - the width of the `input`. See the [Dimensions]({%slug common-features/dimensions%}) article.
+
+* `TabIndex` - maps to the `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key.
+
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article.
 
 >caption The behavior of the component will depend on the type of field it is bound to, and this can result in different user experience and values that it will output:

components/datepicker/overview.md

@@ -38,19 +38,35 @@ The selected date is: @datePickerValue.ToShortDateString()
 The Blazor Date Picker component exposes the following features:
 
 *  `BottomView` - Defines the bottommost view in the popup calendar to which the user can navigate to. Defaults to `CalendarView.Month`.
+
 * `DisabledDates` - Specifies a list of dates that can not be selected.
+
 * `Class` - The custom CSS class rendered on the wrapping element.
+
 * `PopupClass` - additional CSS class to customize the appearance of the Date Picker's dropdown.
+
 * `Enabled` - Specifies whether typing in the input is allowed.
+
 * `Format` - Specifies the format of the DateInput of the DatePicker. [Read more about supported data formats in Telerik DateInput for Blazor UI]({%slug components/dateinput/supported-formats%}) article.
+
 * `Id` - renders as the `id` attribute on the `<input />` element, so you can attach a `<label for="">` to the input.
+
 * `Min` - The earliest date that the user can select.
+
 * `Max` - The latest date that the user can select.
+
 * `PopupHeight` - Defines the height of the DatePicker's Popup. Defaults to `auto`.
+
 * `PopupWidth` - Defines the width of the DatePicker's Popup. Defaults to `auto`.
+
 * `Value` - The current value of the input. Can be used for binding.
+
 * `View` - Specifies the current view that will be displayed in the popup calendar.
+
 * `Width` - Defines the width of the DatePicker. Defaults to `280px`.
+
+* `TabIndex` - maps to the `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key.
+
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article.
 
 The date picker is, essentially, a [date input]({%slug components/dateinput/overview%}) and a [calendar]({%slug components/calendar/overview%}) and the properties it exposes are mapped to the corresponding properties of these two components. You can read more about their behavior in the respective components' documentation.

components/daterangepicker/overview.md

@@ -62,6 +62,8 @@ The Blazor Date Range Picker component exposes the following features:
 
 * `PopupClass` - additional CSS class to customize the appearance of the Date Range Picker's dropdown.
 
+* `TabIndex` - maps to the `tabindex` attribute of both `input` HTML elements in the component and them both will have the same `tabindex`. You can use it to customize the order in which the inputs in your form focus with the `Tab` key.
+
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article. 
     * To restrict the user from writing dates in the input so that the end is after the start, you must implement a custom data annotation attribute (you can find an example in the article linked above). The DateRangePicker component does not do this out-of-the-box in order to provide smooth user experience - the code cannot know what the user intent is and they might fix the range if they are given the chance, so correcting the input immediately may prevent them from using it comfortably. The component can fully control the user experience in the popup calendar and it ensures there that the range values are valid (start is before the end). If the user chooses an end date before the start, this date becomes the new start and they can choose the end again.
 

components/datetimepicker/overview.md

@@ -51,14 +51,25 @@ Selected time: @selectedTime
 The DateTimePicker component exposes the following features:
 
 * `Class` - the custom CSS class rendered on the wrapping element.
+
 * `PopupClass` - additional CSS class to customize the appearance of the DateTimePicker's dropdown.
+
 * `Enabled` - Specifies whether typing in the input and opening the dropdown are allowed.
+
 * `Format` - Specifies the format of the DateInput of the DateTimePicker. Read more in the [Supported Formats]({%slug components/dateinput/supported-formats%}) article.
+
 * `Id` - renders as the `id` attribute on the `<input />` element, so you can attach a `<label for="">` to the input.
+
 * `Min` - The earliest date and time that the user can select.
+
 * `Max` - The latest date and time that the user can select.
+
 * `Value` - The current value of the input. Can be used for binding.
+
 * `Width` - Defines the width of the DateTimePicker.
+
+* `TabIndex` - maps to the `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key.
+
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article.
 
 

components/multiselect/overview.md

@@ -119,6 +119,8 @@ The MultiSelect is a generic component and its type is determined by the type of
 
 * `Width` - the width of the main element. @[template](/_contentTemplates/inputs/inputs-width-template.md#inputs-width-information)
 
+* `TabIndex` - maps to the `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key.
+
 * Templates - they allow you to control the rendering of items in the component. See the [Templates]({%slug multiselect-templates%}) article for more details.
 
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article for more details.

components/numerictextbox/overview.md

@@ -47,14 +47,25 @@ The numeric textbox component is generic, meaning that it takes the type of its
 The numeric textbox provides the following features:
 
 * `Arrows` - whether the up/down spinner arrows (buttons) will be shown. Defaults to `true`.
+
 * `Decimals` - how many decimal places will be allowed while the user is typing a new value. Takes effect only while the input is focused.
+
 * `Format` - the format with which the number is presented when the input is not focused. Read more in the [Standard Numeric Format Strings in .NET](https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings) article.
+
 * `Id` - renders as the `id` attribute on the `<input />` element, so you can attach a `<label for="">` to the input.
+
 * `Max` - the maximum decimal value the input can take. Must be of the same type as the `Value`.
+
 * `Min` - the minimum decimal value the input can take. Must be of the same type as the `Value`.
+
 * `Step` - the decimal value of the step with which the value changes when the arrows are used. Must be of the same type as the `Value`.
+
 * `Value` - to get/set the value of the input.
+
 * `Width` - the width of the component. See the [Dimensions]({%slug common-features/dimensions%}) article.
+
+* `TabIndex` - maps to the `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key.
+
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article.
 
 >caption Example of using a custom format strings

components/timepicker/overview.md

@@ -52,14 +52,25 @@ Selected time: @selectedTime?.ToLongTimeString()
 The Time Picker component exposes the following features:
 
 * `Class` - The custom CSS class rendered on the wrapping element.
+
 * `PopupClass` - additional CSS class to customize the appearance of the Time Picker's dropdown.
+
 * `Enabled` - Specifies whether typing in the input and opening the dropdown are allowed.
+
 * `Format` - Specifies the format of the DateInput of the TimePicker. Read more in the [Supported Formats]({%slug components/dateinput/supported-formats%}) article. Note that format specifiers for non-time portions will only be editable in the input and will not have a representation in the time picker dropdown.
+
 * `Id` - renders as the `id` attribute on the `<input />` element, so you can attach a `<label for="">` to the input.
+
 * `Min` - The earliest time that the user can select.
+
 * `Max` - The latest time that the user can select.
+
 * `Value` - The current value of the input. Can be used for binding.
+
 * `Width` - Defines the width of the TimePicker.
+
+* `TabIndex` - maps to the `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key.
+
 * Validation - see the [Input Validation]({%slug common-features/input-validation%}) article.
 
 The `Min` and `Max` properties require a `DateTime` object, but will only use the time portion from it. Thus, the date itself is not important. The hours, minutes, seconds and AM/PM portions control the range of the tumblers in the time picker dropdown. They do not impose validation/limitations on the input editing.