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

Question

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/

Answer 1

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.

Answer 2

One possible workaround to this solution is to remove the draggable attribute from the parent element in situations where you expect the text to be highlighted.

For instance in an application I'm working on, we show text in a span by default, then reveal an input when the user clicks on it to edit. At that point we remove the draggable attribute until the user is done editing, and then readd it.

That particular flow may or may not work for you, but if you can anticipate when the user might highlight, you can minimize the effect of the undesirable browser behavior. At minimum you can toggle draggable on focus and blur so that the user can highlight with the mouse if he's already editing the text.

Answer 3

The way Ben McCormick mentioned works good for me on the major browsers (tested with Internet Explorer 11, Firefox and Chrome). For my solution you need to have an criteria to determine the parent with the draggable attribute (in my case I use a class name for that).

function fixSelectable(oElement, bGotFocus)
{
	var oParent = oElement.parentNode;
	while(oParent !== null && !/\bdraggable\b/.test(oParent.className))
		oParent = oParent.parentNode;
	if(oParent !== null)
		oParent.draggable = !bGotFocus;
}

<div class="draggable" draggable="true">
    <p>Text</p>
    <input type="text" onfocus="fixSelectable(this, true)" onblur="fixSelectable(this, false)"/>
</div>