0

I'm writing a single-page application that involves dragging "items" from one box into another box, and optionally sorting the items in that second box. Some of these items will consist only of static text labels, while other items will include text input boxes.

I am using jQuery UI to support the dragging/dropping/sorting, and am styling the "items" as jQuery UI buttons. The demo fiddle is at:

http://jsbin.com/oxotep/3/edit

This works great in WebKit-based browsers and Firefox, but doesn't work right in Internet Explorer (even IE 10). IE handles the drag-n-drop and sorting just fine... but if you try to enter text on any of the "items" with text fields, the text field won't hold the cursor focus.

Even with the jQuery UI "button" styling, there doesn't seem to be any standards-compliance issues that I know of in the resulting HTML. Any ideas?

Steve Perkins
  • 11,520
  • 19
  • 63
  • 95
  • Not sure what is going on in jsbin, but works for me using jsfiddle: http://jsfiddle.net/6VcB8/ – A. Wolff Jul 22 '13 at 15:16
  • It looks like the body tag is stealing focus somehow, I used a setTimeout on a blur event handler on the input field to check it like this question http://stackoverflow.com/questions/11544554/get-the-clicked-object-that-triggered-jquery-blur-event – koosa Jul 22 '13 at 15:20
  • Argh! It hadn't occurred to me that jsbin's multi-pane magic might be the culprit. Sure enough, even the jsbin version works in IE when you click to pop it out in a separate window. @roasted, if you want to write that up as an answer then I'll accept it. Otherwise, I'll write it up myself and close out the question later today. Thanks! – Steve Perkins Jul 22 '13 at 15:39

1 Answers1

0

As discussed in the comments on the original question, the issue was with "jsbin.com" itself rather than the code I was testing there. When you test code inside of jsbin's frames, using Internet Explorer, input focus gets stolen by the body tag.

You can work around the problem by popping-out the results as a separate window, rather than running it inside of a frame. Also, "jsfiddle.com" doesn't have this issue in the first place.

Steve Perkins
  • 11,520
  • 19
  • 63
  • 95