Tab does not work for selected tab when followed by a datepicker

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 13 Nov 2020 08:35 by ADMIN

Neale Hayes

Created on: 06 Nov 2020 11:00

Category: TabStrip

Type: Bug Report

Tab does not work for selected tab when followed by a datepicker

Steps to reproduce:
Use the code below. Select the Members tab and press the tab key - nothing happens. Focusing the DataPicker is expected.

  <a href="http://www.google.com">Google</a>

    <div class="RadTabStripWrapper">
        <telerik:RadTabStrip ID="rtsCommitteeTabs" runat="server" MultiPageID="rmpCommitteeTabViews" RenderMode="Lightweight">
            <KeyboardNavigationSettings CommandKey="Alt" FocusKey="T" />
            <Tabs>
                <telerik:RadTab PageViewID="pvMeetings" Value="Meetings" Text="Meetings">
                </telerik:RadTab>
                <telerik:RadTab PageViewID="pvMembers" Value="Members" Text="Members">
                </telerik:RadTab>
                <telerik:RadTab PageViewID="pvAttributes" Value="Other Information" Text="Other Information">
                </telerik:RadTab>
                <telerik:RadTab runat="server" PageViewID="pvCommitteeLinkDocTab1" Text="Link Doc Tab 1" Value="CommitteeLinkDocTab1">
                </telerik:RadTab>
                <telerik:RadTab runat="server" PageViewID="pvCommitteeLinkDocTab2" Text="Link Doc Tab 2" Value="CommitteeLinkDocTab2">
                </telerik:RadTab>
                <telerik:RadTab runat="server" PageViewID="pvCommitteeLinkDocTab3" Text="Link Doc Tab 3" Value="CommitteeLinkDocTab3">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
    </div>
    <div class="RadMultiPageWrapper">
        <telerik:RadMultiPage ID="rmpCommitteeTabViews" runat="server">
            <!-- Meetings Tab -->
            <telerik:RadPageView runat="server" ID="pvMeetings" CssClass="MeetingsTab">                
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="pvMembers" CssClass="MeetingsTab">
                <telerik:RadDatePicker ID="datePickerMeetingsFrom" CssClass="DatePicker" runat="server" RenderMode="Lightweight" EnableAriaSupport="true" EnableKeyboardNavigation="true" aria-label="From date for the meeting date range filter">
                    <DateInput runat="server" ValidationGroup="MeetingDates" aria-label="From date for the meeting date range filter">
                    </DateInput>
                </telerik:RadDatePicker>
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="pvAttributes" CssClass="MeetingsTab">
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="pvCommitteeLinkDocTab1" CssClass="MeetingsTab">
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="pvCommitteeLinkDocTab2" CssClass="MeetingsTab">
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="pvCommitteeLinkDocTab3" CssClass="MeetingsTab">
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>

    <a href="http://www.google.com">Google 2</a>

1 comment

ADMIN

Doncho

Posted on: 13 Nov 2020 08:35

Temporary workaround for the issue:
Wrap the RadDatePicker in a selectable element (with tabindex >= 0). That way one additional element will need to be tabbed through, see http://somup.com/cYXQ2fIuh6

<telerik:RadPageView runat="server" ID="pvMembers" CssClass="MeetingsTab">
    <span tabindex="0">
        <telerik:RadDatePicker ID="RadDatePicker2" CssClass="DatePicker" runat="server" RenderMode="Lightweight">
            <DateInput runat="server"></DateInput>
        </telerik:RadDatePicker>
    </span>
</telerik:RadPageView>

Kind regards,
Doncho
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.