IE11: Unable to disable resize helper for images / inputs etc inside contenteditable. - by mlewandowski

Status : 

  Fixed<br /><br />
		This item has been fixed in the current or upcoming version of this product.<br /><br />
		A more detailed explanation for the resolution of this particular item may have been provided in the comments section.


ID 907422 Comments
Status Closed Workarounds
Type Bug Repros 4
Opened 6/27/2014 2:45:36 AM
Duplicates 742593 791253 Access Restriction Public

Description

IE11: Unable to disable resize helper for images / inputs etc inside contenteditable.

In IE11 there's no way to disable resize helper for images / inputs etc inside contenteditable.

It was possible up to IE10 to achieve that with a couple of events, i.e. controlselect (see http://msdn.microsoft.com/en-us/library/ie/ms536915(v=vs.85).aspx) but it does not work anymore with IE11.

I've also checked IE12 developer preview and it's also not working there as well.

There should be a way to disable it, and docs should also mention that sth is not working with IE11.

It clearly is not supported using W3C spec compilant HTMLElement.addEventListenr method, because on IE10:
elem.attachEvent( 'oncontrolselect', listener ); // Works
and for:
elem.addEventListener( 'controlselect', listener ); // Is not called

Checked two IE versions:

IE11 @ Win7
11.0.9600.17031
11.0.7

IE developer channel version DC1 KB2957980

Update:

After some digging I found out that you should use prefixed event name, like: elem.addEventListener( 'mscontrolselect', listener );
But unfortunately disabling grippers has still unacceptable side effect - it also disables drag and drop ability.
Sign in to post a comment.
Posted by Microsoft on 1/21/2016 at 9:46 AM
Thank you for the feedback. This issue appears to have been fixed in Microsoft Edge. We're not presently working on feature bugs in Internet Explorer outside of security-related issues.
Best Regards,
The Microsoft Edge Team
Posted by Microsoft on 7/24/2014 at 2:02 PM
Thank you for all of the feedback! We would like to share with you that we are tracking this issue for a possible fix in a future release.
Best regards,
The Internet Explorer Team
Posted by mlewandowski on 7/16/2014 at 12:43 AM
Hi Ben,

Yes document.execCommand will do.

The most important thing is that it only removes resize grippers feature. It mustn't disable other features like draging affected elements.
Posted by Ben Peters (MSFT) on 7/15/2014 at 5:13 PM
I agree with Piotrek that using a solution that already exists is cleaner.

@mlewandowski- does the execCommand solution seem acceptable?

Piotrek, does execCommand also cover the issue in the other feedback you mention?

Thanks for the input!
Ben
Posted by Piotrek Koszuliński on 7/13/2014 at 11:45 AM
Hi Ben,

We stumbled upon this problem while working on http://dev.ckeditor.com/ticket/9317. Developers report us that they can't disable resizing images (or tables) and this is a problem for them because sometimes objects' dimensions should be controlled by the system, not by the content author. Additionally, there are two more issues being mentioned - that styles are used instead of attributes (kills responsive design) and that these resize handles have infinite z-index (e.g. when you open a dialog or a drop down they are still visible over it). So I totally understand why developers and users don't like these handles.

However, I've got a different opinion regarding solution than Marek. I don't think that anything related to controlselection is a good choice, because preventing it has some unclear meaning and thus may lead to surprising consequences. While playing with it I noticed problems with focus and that not always event was fired or that preventDefault had no result (it's especially unreliable on non-editable islands). Moreover, as Marek mentioned, when cancelling controlselection we lose drag and drop and it's unclear for me where exactly selection should be placed.

Therefore, despite the problem with execCommand being executable only on document (I mentioned this issue in http://lists.w3.org/Archives/Public/public-editing-tf/2014Jul/0011.html recently), I think that it would be great if IE supported the same (or similar) command as Firefox. Sure, it's non-standard command, but control selection is non-standard feature too, so any way to disable it must automatically be non-standard.

Additionally, as I commented on https://connect.microsoft.com/IE/feedback/details/742593/please-respect-execcommand-enableobjectresizing-in-contenteditable-elements, we were able to block resizing on IE8-10, but we lost this possibility on IE11 . I understand that resizestart and resizeend events weren't standardised, so perhaps that's why they were removed, but when there's no other way to control so intrusive native feature, I don't think it's a good moment for such cleanup.
Posted by mlewandowski on 7/10/2014 at 1:59 PM
After some digging I found out that you're able to use controlselect event in IE, you need to add listener to mscontrolselect (so it's prefixed, and this change / this event was not docummented anywhere).

But unfortunately disabling grippers has still unacceptable side effect - it also disables drag and drop ability.

I will also mention that resizestart / resizeend events does not work in IE11, even if prefixed (msresizestart / msresizeend).

So you can't disable grippers without throwing out drag and drop (which is crucial in RIA). So the main problem still remains, and we see no way to workaround it with IE11.
Posted by mlewandowski on 7/10/2014 at 1:51 PM
Yes you can disable it in FF with:

document.execCommand( 'enableObjectResizing', false, false );

See https://developer.mozilla.org/en-US/docs/Web/API/document.execCommand for its description.

In my opinion FF solution is not perfect, because it's not flexible:

- You're disabling/enabling resize feature by calling *document.execCommand*. That result with disabling the feature in *whole* document globally.

I'll contrast it with event-oriented approach:

- You can decide if you want to prevent it or not - so you can disable it for a part of DOM tree.

So I think that exposing oncontrolselect, onresizestart, onresizeend events is what developers need.
Posted by Ben Peters (MSFT) on 7/9/2014 at 3:33 PM
@mlewandowski - I'm looking into this. Is this affecting a website? Firefox also has resize grippers but doesn't seem to support this event. Do you know of a way to do this in Firefox?
Posted by Microsoft on 6/27/2014 at 11:24 AM
Thank you for providing feedback. We will be investigating this issue further.

Best regards,
The Internet Explorer Team
Posted by mlewandowski on 6/27/2014 at 2:48 AM
It's clearly not supported when using W3C spec compilant HTMLElement.addEventListenr method, because on IE10:

elem.attachEvent( 'oncontrolselect', listener ); // Works

elem.addEventListener( 'controlselect', listener ); // Doesn't work - event is not called