Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    May 2007
    Location
    The Netherlands
    Posts
    187
    Vote Rating
    1
    mschering is on a distinguished road

      0  

    Default [OPEN-688] HtmlEditor jumps to top on first focus in firefox

    [OPEN-688] HtmlEditor jumps to top on first focus in firefox


    When you load a htmleditor with some html like

    HTML Code:
    <font face="arial">
    Dear John,
    
    
    
    Best regards,
    Merijn
    </font>
    And you place the cursor at the word "cursor", the cursor will jump to the top and you will start typing before the <font> tag:
    HTML Code:
    typing starts here<font face="arial">
    Dear John,
    
    
    
    Best regards,
    Merijn
    </font>
    This is very annoying for sending e-mail messages. This only happens on the first focus and happens because of the part to fix silly Gecko errors in the HtmlEditor source code:


    PHP Code:
    onFirstFocus : function(){
            
    this.activated true;
            
    this.tb.items.each(function(item){
               
    item.enable();
            });
            if(
    Ext.isGecko){ // prevent silly gecko errors
                
    this.win.focus();
                var 
    this.win.getSelection();
                if(!
    s.focusNode || s.focusNode.nodeType != 3){
                    var 
    s.getRangeAt(0);
                    
    r.selectNodeContents(this.getEditorBody());
                    
    r.collapse(true);
                    
    this.deferFocus();
                }
                try{
                    
    this.execCmd('useCSS'true);
                    
    this.execCmd('styleWithCSS'false);
                }catch(
    e){}
            }
            
    this.fireEvent('activate'this);
        } 

    I tried commenting out:

    PHP Code:
    /*var s = this.win.getSelection();
                if(!s.focusNode || s.focusNode.nodeType != 3){
                    var r = s.getRangeAt(0);
                    r.selectNodeContents(this.getEditorBody());
                    r.collapse(true);
                    this.deferFocus();
                }*/ 
    And then this behaviour is gone. I didn't notice any silly Gecko errors. Is this part really necessary or can it be worked around?

    Thanks!
    Merijn Schering
    Building Group-Office (http://www.group-office.com) with ExtJS: http://http://demo.group-office.eu user: demo / pass: demo

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Can you follow the guidelines from http://www.extjs.com/forum/showthread.php?t=71015 for your bug report.

    What version of FF are you having issues with? A runnable example is always a good idea as well.

  3. #3
    Sencha User
    Join Date
    May 2007
    Location
    The Netherlands
    Posts
    187
    Vote Rating
    1
    mschering is on a distinguished road

      0  

    Default


    I was writing a simple example and couldn't replicate the bug. It must be something with my app. I'll do some further digging. Thanks for your help.
    Building Group-Office (http://www.group-office.com) with ExtJS: http://http://demo.group-office.eu user: demo / pass: demo

  4. #4
    Sencha User
    Join Date
    May 2007
    Location
    The Netherlands
    Posts
    187
    Vote Rating
    1
    mschering is on a distinguished road

      0  

    Default


    I tested with Firefox 3.5.8 and I'm pretty sure it happened when I was using ff 3.0.17 too.

    I did some more testing and now I was able to replicate it. It only happens when you put the cursor on an empty line. But in case of an e-mail with a salutation and greeting I always do this. But with the text cursor in it in didn't happen. Try this example (put it in the examples folder of ext 3.1.1):

    HTML Code:
    <html>
    
    <head>
    
        <title>HTML editor</title>
    
        <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
    
    
    
        <!-- GC -->
    
        <!-- LIBS -->
    
        <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    
        <!-- ENDLIBS -->
    
    
    
        <script type="text/javascript" src="../ext-all.js"></script>
    
    
    
        <script type="text/javascript">
    	
    	Ext.onReady(function(){
    
    		new Ext.form.HtmlEditor({						
    			hideLabel:true,
    			anchor:'100%',
    			xtype:'htmleditor',
    			value:'<font face="arial" size="3">Dear John,<br /><br /><br /><br />Best regards,<br />Merijn</font>',
    			renderTo:Ext.getBody()
    		});
    	});
    
        </script>
    
      
    
    
    
    </head>
    
    <body>
    
    
    
    </body>
    
    </html>
    Put the cursor on an empty line between Dear John and best regards and start typing and the bug happens.
    Building Group-Office (http://www.group-office.com) with ExtJS: http://http://demo.group-office.eu user: demo / pass: demo

  5. #5
    Sencha User
    Join Date
    May 2007
    Location
    The Netherlands
    Posts
    187
    Vote Rating
    1
    mschering is on a distinguished road

      0  

    Default


    As a workaround I've overridden this function:

    PHP Code:
    onFirstFocus : function(){
            
    this.activated true;
            
    this.tb.items.each(function(item){
               
    item.enable();
            });
            if(
    Ext.isGecko){ // prevent silly gecko errors
                
    this.win.focus();
                var 
    this.win.getSelection();

                
    /*if(!s.focusNode || (s.focusNode.nodeType != 3 && s.focusNode.nodeName!='BODY')){
                    var r = s.getRangeAt(0);
                    r.selectNodeContents(this.getEditorBody());
                    r.collapse(true);
                    this.deferFocus();
                }*/
                
    try{
                    
    this.execCmd('useCSS'true);
                    
    this.execCmd('styleWithCSS'false);
                }catch(
    e){}
            }
            
    this.fireEvent('activate'this);
        } 
    and commented out the range collapse part. It seems to do the trick and I don't get any errors on firefox 3.5.8.
    Building Group-Office (http://www.group-office.com) with ExtJS: http://http://demo.group-office.eu user: demo / pass: demo

  6. #6
    Sencha User
    Join Date
    May 2009
    Posts
    30
    Vote Rating
    0
    diovani is on a distinguished road

      0  

    Default


    Hey, there is a minor fix here:
    http://www.sencha.com/forum/showthre...391#post263391

    Use Ext.override().

Thread Participants: 2