We have an Ext JS app with a TinyMCE rich text editor handled by an Ext extension called Ext.ux.TinyMCE.
In firefox (3 and 4) and internet explorer 9 when the text box is focused and the user hits the tab key, the toolbar disappears.
In chrome (11) a tab is inserted.
This behavior cannot be seen on the tiny MCE demo page:
http://tinymce.moxiecode.com/tryit/full.php
But is can be seen on the Ext.ux.TinyMCE page:
http://blogs.byte-force.com/xor/tinymce/
Anyone have a fix, or a suggestion as how to fix this?
Update
Following the helpful comment by @XOR I started looking at things that could receive the focus of a tab. We are not displaying the status bar but I checked to see if a hidden status bar could still receive focus. I don’t think this is the case.
What does appear to be receiving focus is a curious anchor tag at the end of the table which represents the control.
<a href="#"></a>
When I delete this through firebug the tab no longer hides the toolbar. However removing this programmatically would just be a workaround, the main problem (again pointed out by @XOR) is the height of the control compared to its container. It seems like there are either some resizing conflicts or layout problems afoot here.
The only way I’ve found to fix this is to comment out the resize code in the Ext.ux.TinyMCE extension. Resizing still seems to work without this code suggesting there is a conflict between the Ext, TinyMCE and extension resizing code.