Unplanned
Last Updated: 04 Nov 2024 12:28 by Frank
Created by: Frank
Comments: 0
Category: TabStrip
Type: Bug Report
2

When a TabStrip has Keyboard navigation active, the focus CSS class (rtsFocused) is not removed from the previously active tab when clicking on other tabs with the mouse.

<telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server">
    <Tabs>
        <telerik:RadTab Text="Examples" />
        <telerik:RadTab Text="Configurator">
            <Tabs>
                <telerik:RadTab Text="Default"></telerik:RadTab>
                <telerik:RadTab Text="Test"></telerik:RadTab>
                <telerik:RadTab Text="Final"></telerik:RadTab>
            </Tabs>
        </telerik:RadTab>
        <telerik:RadTab Text="Quick Start" />
        <telerik:RadTab Text="Help">
            <Tabs>
                <telerik:RadTab Text="Search"></telerik:RadTab>
                <telerik:RadTab Text="Topics"></telerik:RadTab>
                <telerik:RadTab Text="Troubleshooting"></telerik:RadTab>
            </Tabs>
        </telerik:RadTab>
        <telerik:RadTab Text="Purchase" />
    </Tabs>
    <KeyboardNavigationSettings CommandKey="Alt" FocusKey="A" />
</telerik:RadTabStrip>

When no keyboard navigation is used, the behavior is acting correctly.

Unplanned
Last Updated: 19 Jul 2023 11:08 by ADMIN

Code to replicate the issue:

<telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server" SelectedIndex="0">
    <KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" />
    <Tabs>
        <telerik:RadTab Text="Examples">
        </telerik:RadTab>
        <telerik:RadTab Text="Configurator">
        </telerik:RadTab>
        <telerik:RadTab Text="Quick Start">
        </telerik:RadTab>
        <telerik:RadTab Text="Help">
        </telerik:RadTab>
        <telerik:RadTab Text="Purchase">
        </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>

Completed
Last Updated: 19 Jun 2023 11:56 by ADMIN
Release R2 2023 SP1
Created by: n/a
Comments: 0
Category: TabStrip
Type: Bug Report
4
We noticed that we can get into the TabStrip (with Keyboard navigation enabled) with the tab key, unfortunately, we can't get out afterwards with back tab (SHIFT + TAB).
Unplanned
Last Updated: 13 Dec 2022 13:08 by David
Created by: David
Comments: 0
Category: TabStrip
Type: Bug Report
1

AXE Errors:

  • Frames must have title attribute - Element location: iframe[src$="content.aspx"]
  • Elements must only use allowed ARIA attributes - Element location: #RadTabStrip1

Setup to reproduce:

<telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1" EnableAriaSupport="true" SelectedIndex="0">
    <AriaSettings Label="TabStrip" />
    <KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" />
    <Tabs>
        <telerik:RadTab Text="Tab 1">
        </telerik:RadTab>
        <telerik:RadTab Text="Tab 2">
        </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" EnableAriaSupport="true">
    <telerik:RadPageView ID="RadPageView1" runat="server" ContentUrl="content.aspx">
    </telerik:RadPageView>
    <telerik:RadPageView ID="RadPageView2" runat="server" ContentUrl="content.aspx">
    </telerik:RadPageView>
</telerik:RadMultiPage>


Completed
Last Updated: 06 Oct 2021 11:10 by ADMIN
Release R3 2021 SP1

The issue is replicated in R3 2021 only. 

<telerik:RadTabStrip runat="server"  ID="RadTabStrip1" >
    <Tabs>
        <telerik:RadTab Text="Tab 1">
            <Tabs>
                <telerik:RadTab Text="fail"></telerik:RadTab>
            </Tabs>
        </telerik:RadTab>
        <telerik:RadTab Text="Tab 2"></telerik:RadTab>
        <telerik:RadTab Text="Tab 3"></telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>

Solution from Admin:

Place the load/script below somewhere under the ScriptManager. It can be added in the MasterPage if needed:

<script>
    Sys.Application.add_init(function fixTabStrip() {
        if (Telerik && Telerik.Web && Telerik.Web.UI && Telerik.Web.UI.RadTabStrip) {
            Telerik.Web.UI.RadTabStrip.prototype._childInserted = function (index, tab, owner) {
                this._allTabs = null;

                if (this._cachedSelectedTab) {
                    owner._setSelectedIndex(this._cachedSelectedTab.get_index());
                    this._cachedSelectedTab = null;
                }

                if (tab._cachedSelected) {
                    owner._setSelectedIndex(index);
                    tab._cachedSelected = false;
                }

                Telerik.Web.UI.RadTabStrip.callBaseMethod(this, "_childInserted", [index, tab, owner]);

                if (tab.get_isBreak()) {
                    var breakElement = document.createElement("li");
                    breakElement.className = "rtsBreak";
                    owner.get_childListElement().insertBefore(breakElement, tab._element.nextSibling);
                }

                //if (tab.get_parent() && tab.get_parent() instanceof Telerik.Web.UI.RadTab && tab.get_parent().get_selected()) {
                //    $telerik.$(tab.get_parent().get_levelElement()).removeClass("rtsHidden");
                //}
            }
        }
    });
</script>

Completed
Last Updated: 12 Aug 2021 14:38 by ADMIN
Release R3 2021
ADMIN
Created by: Attila Antal
Comments: 0
Category: TabStrip
Type: Bug Report
0
When adding a child tab programmatically to a second TabStrip tab that has no child item, the newly created child tab will not show up.

Workaround is to remove the class that was hiding the child element:

if (selectedTab.get_tabs().get_count() > 0) {
    $(selectedTab.get_levelElement()).removeClass("rtsHidden");
}
Completed
Last Updated: 12 Aug 2021 11:24 by ADMIN
Release R3 2021
Workaround: 

.rtsDropClueLeft {
    margin: -0.5em 0 0 -0.75em;
}

    .rtsDropClueLeft:before {
        content: "\e005";
    }

.rtsDropClueRight {
    margin: -0.5em 0 0 -0.25em;
}

    .rtsDropClueRight:before {
        content: "\e007";
    }
Completed
Last Updated: 11 Aug 2021 18:32 by ADMIN
Release R2 2017 SP1
The disabled tabs don't look like disabled in Classic render mode. 

This issue is not observable with the 2016 release as shown in the attached screenshot.

Workarounds:
1) You can change the color of the disabled items by applying the following class to the page:

        .rtsLink.rtsDisabled {
            color: #a5a5a5 !important;
        }

2) Another option is to switch the rendering to Lightweight -> RenderMode="Lightweight".
Completed
Last Updated: 13 Jun 2021 11:16 by ADMIN
Created by: Chris
Comments: 1
Category: TabStrip
Type: Feature Request
3
While it is currently possible to target the first or last item in a RadTabStrip via their CSS classes .rtsFirst and .rtsLast, it is not possible to target individual items, e.g. to add a custom icon or display different background images in tabs.

Assigning icons via the ImageURL property is often not feasible, e.g. when using the RadTabStrip-based navigation controls in Sitefinity.

Numbering the list items, e.g. .rtsLI1, .rtsLI2, .rtsLI3, etc., would be trivial to implement and provide a lot of flexibility through individual CSS targeting.

This also applies to the RadPanelBar and RadMenu controls.
Declined
Last Updated: 28 May 2021 17:49 by ADMIN
Please see the ticket here http://www.telerik.com/account/support-tickets/view-ticket?threadid=1010098.

I still need to support IE8 browsers.  The removal of the frameBorder attribute from the iframe rendering causes layout issues in IE8.  Adding a property to the RadPageView project to re-enable this behavior would fix this issue.  It could be false by default in order to pass the cited validation tool.  The developer would have to enable the property in order for the frameBorder attribute to be rendered as frameBorder="0".
Completed
Last Updated: 17 May 2021 15:05 by ADMIN
Release R2 2021 SP1
ADMIN
Created by: Veselin Tsvetanov
Comments: 1
Category: TabStrip
Type: Bug Report
1

			
Unplanned
Last Updated: 22 Apr 2021 15:53 by ADMIN

Tab Strip scroll buttons do not work in RTL mode in Chrome. The issue can be reproduced here:

Scrolling and Multi-row Tabs Online Demo

 

Video:

http://somup.com/crf3odFFjF

Unplanned
Last Updated: 01 Dec 2020 16:15 by ADMIN
Created by: Bryan
Comments: 0
Category: TabStrip
Type: Feature Request
1
Refer Support Id 1122136  
( https://www.telerik.com/account/support-tickets/view-ticket?threadid=1122136 )
for screen shots and explanation...

Where we use the ShowBaseLine property in Horizontal Orientation, the same feature is not available when in Vertical Orientation
Unplanned
Last Updated: 13 Nov 2020 08:35 by ADMIN

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>

Completed
Last Updated: 21 Oct 2020 15:39 by ADMIN

JAWS reads Tab selected when the focus is moved between tabs without selection:

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" EnableAriaSupport="true" RenderMode="Lightweight" SelectedIndex="0" TabIndex="0">
    <KeyboardNavigationSettings CommandKey="Alt" />
    <Tabs>
        <telerik:RadTab runat="server" Text="Root RadTab1">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Root RadTab2">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Root RadTab3">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Root RadTab4">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Root RadTab5">
        </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>

Completed
Last Updated: 21 Oct 2020 15:39 by ADMIN
Release R3 2020 SP1
Created by: Jeff
Comments: 1
Category: TabStrip
Type: Bug Report
0

Accessibility Insights is reporting invalid markup on all tabs in the TabList.

When consulting the online aria specifications I see that elements with role="tablist" support aria-level="#" where number is > 0.  (https://www.w3.org/TR/wai-aria-1.2/#tablist) However, elements with role="tab" do not. (https://www.w3.org/TR/wai-aria-1.2/#tab)

If possible, we would like to see the aria-level tag moved to the correct page elements in the next release. (Thanks for correcting the aria-level="0" problem previously.) 

I believe this may be the compliance issue Sunil was reporting previously here: https://feedback.telerik.com/aspnet-ajax/1413112-this-ul-should-only-contain-li-elements-without-an-aria-assigned-role

Completed
Last Updated: 16 Oct 2020 17:16 by ADMIN
Release R3 2020 SP1
We are using the Telerik tabStrip ASP.NET AJAX control.

We have set PerTabScrolling="true" on the tabStrip.

Then we have hidden a tab on the client side that is apart of the tabstrip.

Now when we scroll to the end of the list we receive a JavaScript error: Sys.InvalidOperationException: Cannot serialize non finite numbers.

This only happens when we hide a tab.

 
Unplanned
Last Updated: 12 May 2020 12:28 by ADMIN

Scenario: RadButton within RadPageView part of RadMultiPageView integrated with RadTabStrip for switching PageViews.

When switching tabs, additional padding is applied to the text in RadButton. After a postback is made, padding is not applied anymore.

 

 

Unplanned
Last Updated: 03 Jan 2020 15:07 by ADMIN

In the RadMultipageView a portal URL is set as content. The user navigates to one of the pages within the portal. Now there is no way to go back to previous page or to the default landing page where the tab was initially at.

Requesting a new feature in the tab strip to allow navigate through the iframe history (back/forward) for a multipage view. It could be similar to the back/forward buttons of the browser but within the tab of the tab strip where the content URL is set in the multipage view. This could be set enable/disable by a setting.

1 2