Completed
Last Updated: 19 Oct 2020 08:23 by ADMIN
Release R3 2020 SP1
Chris Vaughn
Created on: 28 Sep 2020 13:09
Category: PanelBar
Type: Bug Report
1
Unable to Tab out of RadPanelBar if there are no visible, focusable controls inside of it

The issue is replicated when a PanelBar with ContentTemplate is focused and collapsed:

<p>
    <a href="#" tabindex="1">Top Link</a>
</p>

<telerik:RadPanelBar ID="RadPanelBar1" RenderMode="Lightweight"  runat="server" TabIndex="1">
    <Items>
        <telerik:RadPanelItem runat="server" Text="Apples">
            <ContentTemplate>
                <a href="#" tabindex="1">Something</a>
            </ContentTemplate>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem runat="server" Text="Oranges">
            <ContentTemplate>
                <a href="#" tabindex="1">Nothing</a>
            </ContentTemplate>
        </telerik:RadPanelItem>
    </Items>
</telerik:RadPanelBar>
</div>
<p>
<a href="#" tabindex="1">Another thing</a>
</p>

From ADMIN: 

Placing the following script under the ScriptManager can be used as a temporary workaround:

 

Telerik.Web.UI.RadPanelItem.prototype._moveToNextFocusable = function (e) {
    var $focusableElements;
    var $template;
    var hasTemplate = this.get_templated() || (this.get_hasContentTemplate() && this.get_expanded());

    if (hasTemplate && this.get_focused() && this.get_expanded()) {
        $template = $(this.get_element()).find(".rpTemplate");
        $focusableElements = $template.find("input,a,button,select,textarea").filter(el => !el.hasAttribute('disabled'));
        $focusableElements.eq(0).focus();
        e.preventDefault();
        return false;
    }

    return true;
}

 

0 comments