Salesforce Lightning中单选按钮Autofocus致Picklist Tab失效求助

这个问题的核心原因是手动通过JS强制设置Radio按钮的focus，打乱了浏览器原生的Tab键导航顺序——当Picklist是页面首个可交互字段时，你提前把焦点拉到了后面的Radio按钮，浏览器的Tab导航会从当前焦点元素开始往后遍历，而不是从DOM顺序的第一个元素开始，同时可能干扰了Salesforce社区页面中Picklist组件的原生tabindex处理逻辑。

下面是几个针对性的解决方案，你可以根据场景选择：

方案1：仅当Radio按钮是首个可交互元素时才设置Autofocus #

修改你的JavaScript代码，先判断当前Radio按钮是否是页面中第一个可交互的表单元素（排除不可用、隐藏的元素），只有满足条件时才执行focus操作：

// 获取所有可交互的表单元素（排除disabled、hidden的）
const interactiveElements = Array.from(document.querySelectorAll('input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled])'));
const targetRadio = document.getElementsByClassName('inputFocus')[0];

if (targetRadio && interactiveElements[0] === targetRadio) {
    console.log('Setting focus on first field Radio::', targetRadio.id);
    targetRadio.focus();
    component.set("v.focusSetOnField", true);
}

这样既保留了Radio作为首个字段时的autofocus需求，又不会在Picklist是首个字段时干扰Tab顺序。

方案2：显式设置所有元素的tabindex，确保导航顺序正确 #

如果方案1不满足你的场景（比如需要强制focus到Radio，但仍要保证Picklist能被Tab访问到），可以给页面中所有可交互元素显式设置tabindex属性，按DOM顺序或业务需求指定导航优先级：

步骤1：给Picklist添加tabindex #

假设你的Picklist是HTML的<select>元素，添加tabindex="1"：

<select class="picklist-field" tabindex="1" ...>
    <!-- 选项 -->
</select>

步骤2：给Radio按钮设置更高的tabindex（如果需要它优先获得焦点） #

<input class="inputFocus" type="radio" tabindex="2" aura:id="{!SCHOOLQUESTIONS.Id}" onchange="{!c.fireMyApplicationEvent}" name="{!v.SCHOOLQUESTIONS.Id}" id="{!optionVals.Acc_Ques_Picklist_Name__c}" aria-describedby="{!v.SCHOOLQUESTIONS.Id}" value="{!optionVals.Acc_Ques_Picklist_Name__c}" required="Required" />

步骤3：调整JS的focus逻辑（可选） #

即使设置了tabindex，你仍可以保留focus逻辑，但此时Tab导航会严格按照tabindex的数值顺序执行，不会出现失效问题。

方案3：延迟设置focus，确保页面元素完全初始化 #

有时候Salesforce社区的动态加载元素可能还没完全渲染完成，提前设置focus会导致DOM顺序异常。可以把focus操作放在setTimeout中延迟执行：

const targetRadio = document.getElementsByClassName('inputFocus')[0];
if (targetRadio) {
    setTimeout(() => {
        console.log('Done Rendering Called::5'+ targetRadio.id);
        targetRadio.focus();
        component.set("v.focusSetOnField", true);
    }, 100); // 延迟100ms，可根据页面加载速度调整
}

这个方案可以避免因为元素未完全初始化导致的Tab顺序紊乱问题。

内容的提问来源于stack exchange，提问作者ASHA G