What to do when IE's moveToElementText spits out an Invalid Argument exception

Question

We've written a plugin to the Xinha text editor to handle footnotes. You can take a look at: http://www.nicholasbs.com/xinha/examples/Newbie.html

In order to handle some problems with the way Webkit and IE handle links at the end of lines (there's no way to use the cursor to get out of the link on the same line) we insert a blank element and move the selection to that, than collapse right. This works fine in Webkit and Gecko, but for some reason moveToElementText is spitting out an Invalid Argument exception. It doesn't matter which element we pass to it, the function seems to be completely broken. In other code paths, however, this function seems to work.

To reproduce the error using the link above, click in the main text input area, type anything, then click on the yellow page icon with the green plus sign, type anything into the lightbox dialog, and click on Insert. An example of the code that causes the problem is below:

  if (Xinha.is_ie)
  {
    var mysel = editor.getSelection();
    var myrange = doc.body.createTextRange();
    myrange.moveToElementText(newel);
  } else
  {
    editor.selectNodeContents(newel, false);
  }

The code in question lives in svn at: https://svn.openplans.org/svn/xinha_dev/InsertNote

This plugin is built against a branch of Xinha available from svn at: http://svn.xinha.webfactional.com/branches/new-dialogs

Answer 1

It's not visible in the snippet above, but newel has been appended to the dom using another element that was itself appended to the DOM. When inserting a dom element, you have to re-retrieve your handle if you wish to reference its siblings, since the handle is invalid (I'm not sure, but I think it refers to a DOM element inside of a document fragment and not the one inside of the document.) After re-retrieving the handle from the insert operation, moveToElementText stopped throwing an exception.

Answer 2

I've had the unfortunate experience of debugging this IE exception many different times while implementing a WYSIWYG editor, and it always arises from accessing a property on a DOM node (such as .parentNode) or passing a DOM node to a function (such as moveToElementText) while the DOM node is not currently in the document being rendered.

As you said, sometimes the DOM node is a piece of a document fragment that has been removed from the "actual" DOM being rendered by the browser, and sometimes the node has simply not been inserted yet. Either way, there are a number of properties and methods on DOM nodes that cannot be safely accessed in IE6 until the node has been properly inserted and rendered in the "actual" DOM.

The real kicker is that often this manifestation of IE6's "Invalid Argument" exception cannot be protected by try/catch.