Salesforce LWC对话框：Shift+Tab无法聚焦搜索输入框问题

问题根源 #

当前的handleFocusOut逻辑依赖relatedTarget的data-index属性判断焦点走向，但Shift+Tab触发焦点转移时，relatedTarget可能已经指向模态框外部元素，导致无法正确拦截焦点跳转，最终出现焦点跳出模态框的问题。另外，父容器tabindex="-1"仅能让模态框本身可聚焦，但未实现完整的焦点闭环逻辑。

修复步骤 #

1. 调整事件监听逻辑 #

放弃focusOut事件，改用keydown事件拦截Tab/Shift+Tab操作，这样能在焦点转移前就处理，避免焦点跳出模态框。

2. 实现标准焦点循环 #

明确模态框内的可聚焦元素顺序（搜索框→关闭按钮），处理两种边界情况：

• 在搜索框按Shift+Tab时，强制聚焦到关闭按钮
• 在关闭按钮按Tab时，强制聚焦到搜索框

3. 修正HTML结构（确保可聚焦元素标记清晰） #

给搜索框和关闭按钮添加统一的类名，方便批量查询可聚焦元素：

<template>
    <div data-id="articleModal" class="modal-container" tabindex="-1">
        <!-- 搜索输入框 -->
        <input type="search" class="searchBox modal-focusable" placeholder="搜索..." />
        <!-- 关闭按钮 -->
        <button class="closeWrap modal-focusable" title="关闭模态框">×</button>
    </div>
</template>

4. 替换JS逻辑 #

移除原有的handleFocusOut，编写handleKeyDown处理Tab键逻辑：

handleKeyDown(event) {
    // 仅处理Tab/Shift+Tab事件
    if (event.key !== 'Tab') return;

    const modal = this.template.querySelector('[data-id="articleModal"]');
    const focusableElements = [...modal.querySelectorAll('.modal-focusable')];
    const currentFocusIndex = focusableElements.indexOf(document.activeElement);

    // Shift+Tab（向左跳）
    if (event.shiftKey) {
        if (currentFocusIndex === 0) {
            // 当前在第一个元素，跳转到最后一个
            event.preventDefault();
            focusableElements[focusableElements.length - 1].focus();
        }
    } else {
        // Tab（向右跳）
        if (currentFocusIndex === focusableElements.length - 1) {
            // 当前在最后一个元素，跳转到第一个
            event.preventDefault();
            focusableElements[0].focus();
        }
    }
}

5. 绑定事件 #

在模态框的容器元素上绑定keydown事件：

<div data-id="articleModal" class="modal-container" tabindex="-1" onkeydown={handleKeyDown}>
    <!-- 内部元素不变 -->
</div>

关键说明 #

• 使用keydown而非focusOut：能在焦点实际转移前拦截操作，避免焦点跳出模态框后再强行拉回的突兀感，也更符合无障碍交互标准。
• 统一标记可聚焦元素：通过.modal-focusable类批量管理，后续新增可聚焦元素时无需修改JS逻辑，扩展性更好。
• 依赖原生Tab键行为：仅在边界情况时拦截并修正焦点，保留原生Tab的交互逻辑，符合用户使用习惯。

内容的提问来源于stack exchange，提问作者prachi vandre