Upload control requires additional tab...

[beauXjames]

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...

[Petur Subev]

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

[beauXjames]

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

[Petur Subev]

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

[beauXjames]

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...