Cannot shift-tab out of a toolbar

5 posts, 0 answers
  1. Rich
    Rich avatar
    7 posts
    Member since:
    Sep 2016

    Posted 27 Sep Link to this post

    Using even the published demo code at demos.telerik.com, I cannot shift-tab out of a toolbar control.  This can be reproduced at http://demos.telerik.com/kendo-ui/toolbar/index:  get the focus inside the toolbar and press tab to go forward through the buttons, eventually exiting the toolbar and on to other items.  Again, put the focus in the toolbar and use shift-tab to move backwards through the elements.  The focus reaches the first button and stops - it won't shift-tab out.  

    In my product's code, I experience almost the same, except the shift-tabbing seems to stop at the second button in the toolbar, not the first as seen in the demo.

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    837 posts

    Posted 29 Sep Link to this post

    Hello Rich,

    Are there any elements that can be focused placed before the ToolBar in your scenario? Here's the demo you linked opened in dojo with 2 input elements added before the ToolBar. With their presence Shift + Tab correctly focuses the input that precedes the ToolBar.

    Regards,
    Ivan Danchev
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Rich
    Rich avatar
    7 posts
    Member since:
    Sep 2016

    Posted 29 Sep in reply to Ivan Danchev Link to this post

    Thanks Ivan!  I observe the expected tabbing with your example.  I compared it to mine, and I have elements that are outside of the DIVs containing the toolbar.  If you put those first two input buttons in a separate div that doesn't (eventually) contain the toolbar, you'll see the issue.  Here's a small edit of your snippet, in other words, change:

     

    <div id="example">
               <div class="demo-section k-content wide">
                 <input type="text" id="input1"  />
                 <input type="text" id="input2"  />
                   <div id="toolbar"></div>
               </div>
               <script>....

    to this:

    <div id="outer div">
         <input type="text" id="input1"  />
         <input type="text" id="input2"  />
     </div>
     <div id="example">
        <div class="demo-section k-content wide">
           <div id="toolbar"></div>
        </div>
        <script>...

  5. Rich
    Rich avatar
    7 posts
    Member since:
    Sep 2016

    Posted 02 Oct in reply to Ivan Danchev Link to this post

    Hi Ivan,

    In addition to this issue (which seems to depend on whether the elements to shift-tab out to are in a containing div), I've found what I think is another problem.

    If resizable is set to false, then the focus using shift-tab always *stops* at the second toolbar button.  This is seen on the Telerik-supplied demo here at dojo:   in the "Non-resizable Toolbar" toolbar, tab to "Button 4", then attempt to shift-tab to "Button 1".  The focus stops at "Button 2" and won't go any further back.

  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    837 posts

    Posted 03 Oct Link to this post

    Hi Rich,

    Thank you for your efforts in reproducing and describing the problematic behavior you have encountered.

    We logged both issues you reported as bugs. Their status can be tracked through the respective public items logged in our public github repo: issue1, issue2.

    As a token of gratitude for your involvement in identifying these issues I updated your Telerik points.

    Regards,
    Ivan Danchev
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready