This is a migrated thread and some comments may be shown as answers.

Tabindex not working correctly

9 Answers 1816 Views

DropDownList

This is a migrated thread and some comments may be shown as answers.

Lars asked on 12 Jan 2016, 08:30 AM

Hi Everybody,

I have an ASP.NET MVC site, when I do some Razor code to add a Dropdownlist to the view.

I have the following code in my cshtml file for generating the Dropdown and it works fine.

<div class='col-md-8'>
@(Html.Kendo().DropDownListFor(m => m.CountryCode)
.DataTextField("Text").DataValueField("Value").
AutoBind(true).DataSource(dataSource => dataSource.Read(read =>
{ read.Action("GetCountries", "Member"); })).Events(f => f.DataBound("OnDataBound")))
@Html.ValidationMessageFor(m => m.CountryCode)
</div>

The output in IE 11

<span tabindex="0" title="" class="k-widget k-dropdown k-header" role="listbox" aria-busy="false" aria-disabled="false" aria-expanded="false" aria-haspopup="true" aria-readonly="false" aria-activedescendant="e8e82663-3c75-4f99-9459-7b7a41945db1" aria-owns="CountryCode_listbox" unselectable="on">

<span class="k-dropdown-wrap k-state-default" unselectable="on">

<span class="k-input" unselectable="on">Danmark</span><span class="k-select" unselectable="on">

<span class="k-icon k-i-arrow-s" unselectable="on">select</span></span></span><input name="CountryCode" tabindex="8" class="k-valid" id="MedlemLandekode" style="display: none;" type="text" value="Danmark" data-role="dropdownlist" data-val-required="Feltet er påkrævet" data-val="true"></span>

<script>

jQuery(function(){jQuery("#MedlemLandekode").kendoDropDownList({"dataBound":OnDataBound,"dataSource":{"transport":{"read":{"url":"/Felix.ASPNet.MVC/Medlem/GetCountries"},"prefix":""},"schema":{"errors":"Errors"}},"dataTextField":"Text","autoBind":true,"dataValueField":"Value"});});

</script>

<span class="field-validation-valid" style="display: none;" data-valmsg-replace="true" data-valmsg-for="CountryCode"></span>

I can see that my top element has tabindex = 0 instead of tabindex =8, this is avoiding me to tab into the dropdown list

9 Answers, 1 is accepted

answered on 14 Jan 2016, 10:02 AM

Hello Lars,

Normally, the tabindex of the DropDownList wrapper (<span class="k-widget k-dropdown">) is copied from the DropDownList element (<input id="MedlemLandekode">) during widget initialization. If the two tabindex values end up being different suggests that the tabindex of 8 is set via JavaScript after the widget is created. In this case, please set it to the wrapper <span> directly.

Another possible option is to set it in the server-side declaration via HtmlAttributes().

@(Html.Kendo().DropDownList()

.HtmlAttributes(new { tabindex = 8 })

)

Regards,
Dimo
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 19 Jan 2016, 10:32 AM

Hi Dimo,

The number 8 is because it is the 8 field from top left.

And If you look at the first code part, you are also able to see it.

But this is being overriden by.

answered on 21 Jan 2016, 09:09 AM

Hi Dimo,

I don't want the set the TabIndex server side, I want the page figure it out by it self, like all the other control from you toolbox.

The TabIndex : 8 in this piece of code are generated by you tools

<span class="k-dropdown-wrap k-state-default" unselectable="on">

<span class="k-input" unselectable="on">Danmark</span><span class="k-select" unselectable="on">

<script>

jQuery(function(){jQuery("#MedlemLandekode").kendoDropDownList({"dataBound":OnDataBound,"dataSource":{"transport":{"read":{"url":"/Felix.ASPNet.MVC/Medlem/GetCountries"},"prefix":""},"schema":{"errors":"Errors"}},"dataTextField":"Text","autoBind":true,"dataValueField":"Value"});});

</script>

Likewise the Span at the top, with Index = 0, If I change this runtime in Google the Tab function works fine.

The reason that I don't want to have a Hardcoded tabindex in my files, is when we are getting new fields on the page, which should follow the standard structure with tabindex and not making any dependencies by "Developer" controlled tabindex.

answered on 22 Jan 2016, 03:10 PM

Hi Lars,

Let me throw some light on what the DropDownList renders and how it works.

The following server-side declaration...

@(Html.Kendo().DropDownListFor(m => m.FieldName)

.DataTextField("Text").DataValueField("Value")

)

... will render the following on the page (irrelevant HTML attributes have been ommitted):

<input id="FieldName" name="FieldName" type="text" value="2" /><script>

jQuery(function(){jQuery("#FieldName").kendoDropDownList({"dataSource":[],"dataTextField":"Text","dataValueField":"Value"});});

</script>

There is no default tabindex. If one is specified via HtmlAttributes (as shown earlier), it will be rendered as an <input> attribute.

During initialization, the DropDownList widget renders all those <span> elements that you are seeing in the browser's DOM inspector. If a tabindex is applied to the <input> at the time the widget is initialized, it will be copied to the wrapper <span> element. If a tabindex is not applied to the <input>, then the <span> will receive a tabindex of zero, so that it can be focused.

You can check what exactly the DropDownList renders in your case via "View Source". This is not the browser's DOM inspector, but the classic "View Source" tool that all browsers provide - it shows the HTML content that has been served from the server, without any JavaScript-based modifications.

The fact that the tabindex values of the <input> and the <span> are different, indicates that the tabindex of "8" has been applied to the <input> element after the widget has been initialized. As a result, it is not copied to the <span>, because the widget is not aware of the change. There is no way for a tabindex of "8" to be initially rendered in the <input>, and the widget to not copy it.

In short, my advice is to check where the "8" tabindex value comes from, because it is not from Kendo UI. There must be some other script on the page, which sets it.

Regards,
Dimo
Telerik