Firefox cursor invisible, becomes visible when clicking anything else

Question

I have the absolutely strangest bug I've ever encountered, and I'm near my wit's end on this one. Anyone with ideas on how to debug this (or any clever workarounds) would be awesome.

The problem:

I'm making a simple WYSIWYG editor in Firefox using contenteditable. The problem appears when I load the text to edit via ajax. Before the load, the cursor appears fine (for a split second), and once the text loads it disappears. You can still enter text, and the cursor is definitely still "there" (a status box shows the current line/col just fine), but the cursor is not visible and the selection overlay does not appear.

Here's what makes this really strange: clicking ANYWHERE, on any other dom element, on firebug, even on another window -- makes the cursor return and behave like normal. In fact, the only time the cursor has any problems is at the very beginning, when initially loading the page or on refresh. Clicking anywhere inside the contentedtiable div does not fix it -- you have to click outside for it to refresh.

Right now, I just need a workaround. I've tried 500 flavors of $(someelement).click or $(somelement).focus, but they don't fully replicate an "actual" click from a user.

Has anyone seen anything like this before? Thanks.

Answer 1

Well, I didn't find out what is causing the problem, but I found a quick-and-dirty fix does the trick. I just append an anchor tag to the DOM, focus it (using jQuery .focus), and then remove it.

I tried .focus many times before, but I always tried it on div or li elements, which didn't do the trick. It needs to be an anchor tag. I suspect it's because the anchor tag actually has some visible component to its focus, which resets something in firefox's internal cursor display mechanism.

Either way, if you're trying to solve problems like this and this doesn't fix it, look at MorganTiley's explanation -- that might give you some good leads.

Answer 2

This is because when you load the content, you are changing the structure of the html nodes and thus invalidating the selection (a cursor is just a collapsed selection). I recommend trying to reset it via Rangy. It works well in combination with jquery. Use jquery to get the first element in your contentEditable area, e.g. the first paragraph, then make a new rangy range and select that paragraph (node) and collapse to start. This will put the cursor at the very beginning of your content. Here's some rough code

$(document).ready(function() {
  //init rangy
});

function ajaxLoaded {
  var p = $(".contenteditablediv p:first")[0];
  var sel = rangy.getSelection();
  sel.collapse(p, 0);
}