TinyMCE - pressing tab causes the toolbar to disappear

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开发者_StackOverflow社区 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.

---

You could do the following (catch keyboard event and handle the insertion of the tab yourself + disabling of the default browser behaviour). You may use this code inside your own plugin or using the tinymce init parameter setup

ed.onKeyPress.add(function(ed, evt) {

  // Tab is pressed
  if (evt.keyCode == 9 && !evt.ctrlKey)
  {

    // check, whether the cursor is inside of a list or not
    var range = ed.selection.getRng();
    var rangeStartNode = range.startContainer;

    /*
    Check if the selcted range is sourrounded by a list
    node, because inside a listing the TAB key should have
    it's original function (indent or outdent (shift))
    */
    if (!t.isSurroundedBy(rangeStartNode, 'LI') && !t.isSurroundedBy(rangeStartNode, 'UL') && !t.isSurroundedBy(rangeStartNode, 'OL') && !t.isSurroundedBy(rangeStartNode, 'TD') && !t.isSurroundedBy(rangeStartNode, 'TH'))
    {
        if (is_win && evt.shiftKey || mac && evt.altKey)
            ed.execCommand('mceInsertContent', false, '⇥'); // insert right-indent tab entity
        else
            ed.execCommand('mceInsertContent', false, '→'); // insert normal tab entity
        evt.preventDefault();
        evt.stopPropagation();
    }
  }
});

---

Looks like the problem is in the Ext.form.CompositeField control that you use in your example. Ext.ux.TinyMCE is not receiving a call to onResize method when parent composite field got resized by anchor layout. So the editor doesn't have a chance to change its size.

If you would remove CompositeField and place editor right into the form, then resizing works correctly. Even with anchor layout.

---

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.