ExtJS 6.5.3-7.9版本：Button Menu停靠TextField按TAB键报错求助

问题详情 #

ExtJS经典版6.5.3至7.9版本存在异常行为：在Button Menu的停靠（docked）TextField中按下TAB键时，会触发Uncaught TypeError: Cannot read properties of undefined (reading 'el').错误。该问题在Chrome、Firefox和Edge浏览器中均会复现，错误产生于ExtJS 7.7的/build/ext-all-debug.js文件第246577行的processFocusableContainerKeyEvent()方法中。

复现代码示例：

Ext.create('Ext.button.Button', {
    text: 'Open menu',
    renderTo: Ext.getBody(),
    menu: {
        width: 300,
        items: [{text: 'some items'}],
        dockedItems: [{
            xtype: 'textfield',
            emptyText: 'press tab button inside textfield to get error',
        }],
    }
});

将TextField放入dockedItems内的任何容器/面板中均无法解决问题，仅当把所有内容放在menu的items中时，按TAB键才不会崩溃，但这会增加数据操作的复杂度。

修复方案 #

通过重写Ext.container.Container的processFocusableContainerKeyEvent方法，增加对findNextFocusable返回值的空判断，避免访问undefined对象的el属性：

Ext.define('Fix.MenuDockedTabIssue', {
    override: 'Ext.container.Container',
    processFocusableContainerKeyEvent: function(e) {
        var me = this,
            focusable = me.findNextFocusable(e);
        
        // 新增判断：当找不到下一个可聚焦元素时直接返回，避免报错
        if (!focusable) {
            return;
        }
        
        if (focusable.isComponent) {
            focusable.focus();
        } else {
            focusable.el.focus();
        }
        e.stopEvent();
    }
});

修复原理 #

原方法未处理findNextFocusable返回undefined的场景：当Menu中的停靠组件按下TAB键时，框架尝试查找下一个可聚焦元素，但由于Menu的焦点管理逻辑限制，无法找到有效元素，导致focusable为undefined，此时访问focusable.el就会触发TypeError。新增空判断后，会直接终止方法执行，避免错误发生。

内容的提问来源于stack exchange，提问作者Sergey Bogdanov