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/

Kissable

This appears to be broken on Chrome now as well (you can double click but not click and drag), and even more broken on Firefox (you can't choose a text position with the mouse there) – Derivative

Same here in IE11, Chrome is working fine still... – Cactus

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.

Cockle

Thanks Jonathan for answer. We are facing this problem on client intranet website, we are using ng-grid with movable columns and filters in headers. – Kissable

@Kissable Would you be willing to setup a fiddle using your configuration and either ng-grid (or its newer version, UI Grid) for further testing? Perhaps we can identify another way around the issue for the time being. – Cockle

Currently facing this exact issue in our form builder at awesomeforms.com ... – Hep

@Sampson: it's been a year, any update or work around solution from Microsoft? – Lactoprotein

@ChrisVincent Can you get me access to the builder to share with our team? For issues like this, it's often best to have a real site on-hand that is broken as a result of the bug. – Cockle

@kienct89 While we've addressed numerous selection/draggable issues over the last year, this doesn't appear to be one of them. The likely reason is that we don't have much data on real-world impacts. If you have a live domain that is affected by the lack of support, this will help us prioritize the work. Edge and Firefox appear to function in very identical ways. – Cockle

@Cockle you should be able to create a free account. However, we ended up using a workaround, as obviously the product has to be usable for our customers, so the issue won't appear if you go there to check it out. – Hep

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.

Derivative

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>

Herminiahermione

Answer 4

What we observed, if we blur out and focus again the issue is resolved. However moving cursor position is still not accomplished. But at least does the trick for single click.

$(document).on('mouseup', '#id input:text, textarea', function (event) {
   $(this).blur();       
   $(this).focus();
});

Cutlip

Answer 5

This isn't an answer but I wanted to report that this issue is still occurring as of FF 124.0.1. Chrome (123.0.6312.59) works as expected. You would think Mozilla would have resolved this by now.

Rockling