Drag-select does not work in IE 11?

I just noticed that drag-select of normal text does not work in Internet Explorer 11 (running inside VirtualBox). I also tried it on the prosemirror demo site to make sure it is not a bug in my own code.

I hope it can be fixed soon, because it is a basic functionality that people use a lot.

Thanks in advance!

PS: Drag-select seems to work correctly in Chrome and Firefox.

Is it working for you on http://prosemirror.net ? I can’t see the problem there.

No, it is not working there. I’m using VirtualBox with IE11 running in it, on an OSX laptop, and I’m using the trackpad of the laptop. I don’t believe anything is wrong with this setup, because selecting normal text (outside the editor) is possible.

Perhaps if you outline a little what is happening when the user starts selecting text, I might understand the code and I could see if I can debug it myself.

I’m also using VirtualBox (using the test VM from Microsoft), but on Linux.

When you drag-select, or generally manipulate the selection with the mouse, ProseMirror allows the browser to handle the selection, notices that the DOM selection changed, and updates its own representation of the selection – most of the relevant code is in prosemirror-view/src/selection.js

Hmm, does this updating of the internal representation happen while the user is selecting text? Or after?

It really looks as if something is messing with the selection (or focus) while I’m trying to select something.

Is the DOM touched by prosemirror while the selection is happening? If this is the case, then I could imagine that the browser would get confused by this.

By the way, selection using keyboard (shift-arrow) works fine.

PS, I’m using VirtualBox, with IE version 11.0.9600.18053 (not a test VM).

Possibly. The intention is not to do this, since, as you describe, it can mess with UI behavior, but there may be an issue with that code that leads to what you describe. The idea is to keep a ‘last seen DOM selection’, and only redraw the DOM selection if it doesn’t correspond to the last seen one. When reading the selection from the DOM, the current DOM selection is stored, so that the editor should not redraw it unless either the DOM or the selection model changes, but this is somewhat fragile, and IE might be doing something that breaks it.

I see.

Would it be easy to write (or turn on?) an invariant to check if the DOM is still what prosemirror expects it to be?

By the way, I’ve noticed in my own code (not related to prosemirror) that IE11 sometimes replaces text-elements in the DOM by other (almost identical) ones. I’ve built my own virtual-dom library, and this library also expects that nothing else besides the library touches the DOM, so that’s how I come to know this. So it wouldn’t surprise me if your guess is correct.

That might cause issues like this – we’re comparing DOM nodes by-identity, and if they are randomly replaced, that’ll cause a selection reset.

I should note that Chrome and Firefox don’t seem to be bothered at all by having the selection reset during a mouse drag – I haven’t verified whether IE does actually get confused by that. You might want to start by determining whether that really is where the problem comes from.

I did some experimenting, and IE does not seem to introduce new elements during the selection.

I’ve noticed that on the prosemirror page, IE gives an error: “Object doesn’t support property or method ‘contains’”

It can be fixed with this code:

window.Text.prototype.contains = function(){ return false; };

(I have a different problem in my own code, which I will still have to debug).

The contains issue is fixed on the master branch of prosemirror-view, it could be that that also fixes the selection