In Firefox, a <br /> is inserted in an empty text area when using editor.focus() on initially hidden editors

[Niek Kouwenberg]

In our CMS, the CKEditor is sometimes loaded in the background, in a hidden div (part of a tabset). Although hidden, the editor instance is already created and works fine.

When displaying the DIV, I want to focus the editor, and do so by using editor.focus(). This will put focus on the editor. This works correctly for and empty editor or one with content, and works correctly in all browsers.

The only exception is Firefox (tested on both version 3 and 4), which adds the following content on a editor without any content:

<p><br />
	&nbsp;</p>

The result being an empty editor, with a <br /> tag in it. In addition, focus is placed on the second line, but when starting to type it will place all text on the first line, NOT removing the second line. You just can't type anything on the second line.

This issue has been present since at least 3.5.3.

---

Steps to reproduce:

1. Create a DIV with display: none;
2. Place a textarea inside, without any content
3. Replace the textarea with a CKEditor
4. Show the DIV (it will not have focus)
5. Focus the editor using editor.focus()
6. The code mentioned above is inserted into the editor

Expected result:

6. The editor is focused, content remains empty

---

Does not apply for:

• other browsers than Firefox
• editor with existing content
• manually focusing the editor by clicking on it
• editors not hidden when created

[Niek Kouwenberg]

Test case (copied from _samples) displaying the odd behavior.

[Jakub Ś]

Reproducible on Firefox browsers in Windows XP (in Win 7 it works fine).

This is rather strange issue. I have tried to replicate it using:

<p id="editor3_container" style="display:none;">
	<textarea cols="80" id="editor3" name="editor3" rows="10"></textarea>
		<script type="text/javascript">				
			CKEDITOR.replace( 'editor3' );
			document.getElementById('editor3_container').style.display = '';
                        setTimeout(function(){CKEDITOR.instances['editor3'].focus()}, 3000);
		</script>
</p>

and then:

<p id="editor3_container" style="display:none;">
	<textarea cols="80" id="editor3" name="editor3" rows="10"></textarea>
		<script type="text/javascript">				
			CKEDITOR.replace( 'editor3' );
			document.getElementById('editor3_container').style.display = '';			
               </script>
		<br/>
<input type="button" onclick="CKEDITOR.instances['editor3'].focus();" value="focus2" />
</p>

None of this resulted in error.
Br tags were inserted only when to buttons with inline events were used - one for showing editor and the other for setting the focus.

[Niek Kouwenberg]

My original code doesn't use two separate buttons, but an Ajax response to load the editor and a onclick event listener to show the hidden tab and focus the editor afterwards. Long timeouts between all actions make no difference. The problem should therefore not be search for in the buttons with onclick actions.

P.S. I am using Windows 7, so the problem occurs there too.

[Frederico Caldeira Knabben]

Confirmed with FF4 and Windows 7 with the provided TC page.

I've checked the DOM with Firebug. As soonas we click the "show" button, the editing area contains the following:

<br type="_moz">

Then, when clicking on "focus", the editor automatically fixes the above structure, by creating a <p> for it. Problem is that we now have two padding <br>s:

<p><br type="_moz"><br type="_moz"></p>

This breaks things, as we should not have this additional padding <br> created.

[Jakub Ś]

It seems that there is easier way to reproduce this problem.

1. Paste the below code into any sample or use abc3.html attached to this ticket

   editor.on('instanceReady', function(e){					
   	e.editor.on('afterSetData', function(evt){
   		e.editor.focus();
   	});
   	e.editor.setData('<p>Some text</p><p>&nbsp;</p>');
   });
   

2. Once data is set, start typing - you will see that br is added above typed text.

Problem has been reproducible in all Operating Systems from CKEditor 3.3.

NOTES:

1. There is no need for using hidden div.
2. It seems that this problem only occurs with empty lines. When using in setData E.g. e.editor.setData('<p>Some text</p>'); there is no problem.