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

Tabindex not working correctly

9 Answers 1510 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Lars
Top achievements
Rank 1
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

Sort by
0
Dimo
Telerik team
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
0
Lars
Top achievements
Rank 1
answered on 18 Jan 2016, 07:49 AM

Hi Dimo, 

 All thats fine, but I expect Telerik/Kendo to handle this tabIndex issue.

 All the pasted code are generated by Telerik and nothing custom has been added. 

 My Razor code around this.

@(Html.Kendo().DropDownListFor(m => m.MedlemLandekode)
.DataTextField("Text").DataValueField("Value").
    AutoBind(true).DataSource(dataSource => dataSource.Read(read =>
    { read.Action("HentLande", "Medlem"); })).Events(f => f.DataBound("OnDataBound")))

So I actually expect Telerik provide me the right TabIndex on the current DropDownList. 

0
Dimo
Telerik team
answered on 19 Jan 2016, 10:18 AM
Hi Lars,

Can you please elaborate on where the tabindex value of 8 come from in your scenario? This is still unclear, as the widget declaration does not set any tabindex. Thank you.

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
0
Lars
Top achievements
Rank 1
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. 

<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">

But this is being overriden by.

<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">

 

0
Dimo
Telerik team
answered on 21 Jan 2016, 08:55 AM
Hello Lars,

I see where tabindex="8" is in the HTML, however, it is unclear to me how this "8" value ends up being rendered. Judging by the provided code, a tabindex is not set via the DropDownList server-side configuration. So what code applies the custom tabindex and when?

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
0
Lars
Top achievements
Rank 1
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 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>

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.

0
Dimo
Telerik team
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
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
0
Lars
Top achievements
Rank 1
answered on 25 Jan 2016, 05:51 AM

Hi Dimo, 

 Thanks for the good and long explanation, but I still think there is a problem. 
  You can actually see it on your own demo site:http://demos.telerik.com/aspnet-mvc/dropdownlist/remotedatasource

Here is the outerspan with TabIndex = 0, so you would never be able to tab into the dropdownlist?

That's actually my problem as well?

 

0
Dimo
Telerik team
answered on 27 Jan 2016, 07:58 AM
Hi Lars,

A tabindex of 0 does not prevent focusing (negative tabindex does that). Actually, it enables focusing in this case, because <span> elements are normally not focusable.

Please check the following video, which shows that focusing works as expected:

http://screencast.com/t/uAsrLKN50zJ2

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
Tags
DropDownList
Asked by
Lars
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Lars
Top achievements
Rank 1
Share this question
or