Opened 9 years ago

Last modified 7 years ago

#7836 confirmed Bug

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

Reported by: Niek Kouwenberg Owned by:
Priority: Normal Milestone:
Component: General Version: 3.3
Keywords: Firefox Cc:

Description

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:

  1. 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

Attachments (2)

focus_issue.html (1.7 KB) - added by Niek Kouwenberg 9 years ago.
Test case (copied from _samples) displaying the odd behavior.
abc3.html (2.5 KB) - added by Jakub Ś 7 years ago.

Download all attachments as: .zip

Change History (6)

Changed 9 years ago by Niek Kouwenberg

Attachment: focus_issue.html added

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

comment:1 Changed 9 years ago by Jakub Ś

Keywords: Firefox added
Status: newconfirmed
Version: 3.63.3.2

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.

comment:2 Changed 9 years ago by 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.

comment:3 Changed 9 years ago by 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.

Changed 7 years ago by Jakub Ś

Attachment: abc3.html added

comment:4 Changed 7 years ago by Jakub Ś

Version: 3.3.23.3

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.
Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy