Tabindex not working correctly

10 posts, 0 answers
  1. Lars
    Lars  avatar
    11 posts
    Member since:
    Jul 2015

    Posted 12 Jan Link to this post

    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

  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 14 Jan Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Lars
    Lars  avatar
    11 posts
    Member since:
    Jul 2015

    Posted 18 Jan in reply to Dimo Link to this post

    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. 

  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 19 Jan Link to this post

    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
  6. Lars
    Lars  avatar
    11 posts
    Member since:
    Jul 2015

    Posted 19 Jan Link to this post

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

     

  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 21 Jan Link to this post

    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
  8. Lars
    Lars  avatar
    11 posts
    Member since:
    Jul 2015

    Posted 21 Jan in reply to Dimo Link to this post

    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.

  9. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 22 Jan Link to this post

    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
  10. Lars
    Lars  avatar
    11 posts
    Member since:
    Jul 2015

    Posted 24 Jan in reply to Dimo Link to this post

    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?

     

  11. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 27 Jan Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready