[SOLVED] No possibility to select text inside <input> when parent is draggable

No possibility to select text inside <input> when parent is draggable

~~This one is IE specific~~ (not anymore, apparently). We have very simple code:

<div draggable="true">
    <p>Text</p>
    <input type="text"/>
</div>

On Chrome it works fine, you can select all text inside <input>, eg. double-click it or click-and-drag. On IE10 you cannot do both of these actions (not sure about IE in other versions). Any ideas?

Fiddle: http://jsfiddle.net/s5g4gr8g/

Solution

This was reported as a bug a few months back and is currently being considered for a future release.

One of the hold-ups is that we are unable to determine the impact of the issue. I recall searching online and on GitHub for sites that relied on this pattern, but largely came up empty-handed. If you happen to know of any sites that use this, and are therefore broken in Internet Explorer 10 and 11, I would be happy to update the internal issue and request immediate action.

That being said, it does appear you can select text if you tab focus to the element itself, and then utilize the arrow and shift keys to perform your selection. You can also right-click the input control, which also places a cursor that you can then manipulate with your keyboard. It's not ideal, but it may suffice until we can resolve this from the browser-end.