Upload control requires additional tab...

5 posts, 1 answers
  1. beauXjames
    beauXjames avatar
    20 posts
    Member since:
    Aug 2012

    Posted 13 Feb 2013 Link to this post

    The upload control 'Select...' button remains the focus for the duration of 2 tabs when included in a form with additional inputs. 

    The final output structure is as such and doesn't include any other form elements but the input[type=file] element
    <div class="k-widget k-upload">
    <div class="k-dropzone">
    <div class="k-button k-upload-button">
    <input name="photos" id="photos" type="file" data-role="upload" autocomplete="off" class="">
    <span>Select...</span>
    </div>
    <em>drop files here to upload</em>
    </div>
    </div>
    What is it about this that 
    1. Does not take into consideration the need for a tabbed interface where the button is a primary focus
    2. Does not allow to implement 'focus' on said button

    Please advise...


  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 15 Feb 2013 Link to this post

    Hello beauX,

    I am not sure I understand the exact setup and the issue that arises. Can you please modify that jsbin I created and explain in more details what goes wrong?

    http://jsbin.com/utoxef/2/edit

    Kind Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. beauXjames
    beauXjames avatar
    20 posts
    Member since:
    Aug 2012

    Posted 15 Feb 2013 Link to this post

    Sure thing...done :: http://jsbin.com/utoxef/3/edit

    Couple things to note. 
    1. Behavior in IE is different than in Chrome/Firefox
    2. We need it to work in IE
    Ha. So, I am aware that the drag-n-drop features are not available in IE and we're totally fine with that (except for the fact there's no way to completely disable the option so the component can be equal in both browsers.)

    What has been a real question is how in IE, if you focus on the pre-upload input, it takes an additional tab to get to the post-upload input box. In both browsers, I can emulate a 'hover' but there I cannot gain access to the 'focus' visual state of the control...so, in the flow of our forms, the kendo ui upload 'button' is incredibly evasive.

    I have tried numerous attempts at catching the focus and tracking the tab order...but in IE, it simply doesn't make any sense and seems to be a black hole for this extra tab...it's as if both tabs do, in fact, focus on the same object, however the state of the control is unaware.

    I would think that the 'invisible' input field and the input[type=file] and the div button would be the culprit, but it's killing me that I can't even hack around it. 

    Thanks for your attention to the matter.

    b
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 20 Feb 2013 Link to this post

    Hello b,

    Thank you for providing the jsbin example - now I understand the case.

    This behavior is because the input type="file" has two elements (which could not be separated) that gain focus. To see in action what exactly is happening here is a jsbin:

     http://jsbin.com/utoxef/8

    If you find a work-around to the issue above we will be glad to assist you and apply the same work-around to the Upload widget.

    Kind Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Answer
    beauXjames
    beauXjames avatar
    20 posts
    Member since:
    Aug 2012

    Posted 14 Mar 2013 Link to this post

    Unfortunately, our decision was to accept it. The functionality within all browsers except for IE behaved as expected, while in IE (9 primarily) the 2-tab behavior is unavoidable. The 2 items are inseparable. Eventually, we'll replace the control entirely...but for now, that's our only issue with it.

    ...thanks...
Back to Top
Kendo UI is VS 2017 Ready