PrimeNG pFocusTrap隐藏父元素焦点陷阱问题的SCSS优化问询

问题背景 #

PrimeNG的pFocusTrap组件存在焦点陷阱bug：当通过Tab键切换可聚焦元素时，焦点会误入祖先元素带有display:none（尤其是Bootstrap响应式隐藏类d-xx-none）的元素上，导致焦点卡滞。你的修复思路是通过SCSS强制将这类隐藏元素下的可聚焦后代设置为display:none，从根源上避免它们被焦点捕获，这个方向是可行的。

SCSS代码重构优化 #

原代码存在大量重复的选择器逻辑，可通过SCSS的循环和变量简化，提升可维护性：

// 定义Bootstrap的显示类型和断点列表
$display-types: inline inline-block block grid table table-cell table-row flex inline-flex;
$breakpoints: sm md lg xl;
$tabbable-selectors: 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex]:not([tabindex="-1"]), *[contenteditable]:not([contenteditable="false"])';

// 生成指定断点的所有显示类选择器
@function get-display-classes($size) {
  $classes: ();
  @each $type in $display-types {
    $classes: append($classes, '.d-#{$size}-#{$type}', 'comma');
  }
  @return $classes;
}

// 循环生成各断点的隐藏规则
@each $bp in $breakpoints {
  // 获取当前断点之后的所有更大断点
  $higher-bps: slice($breakpoints, index($breakpoints, $bp) + 1);
  $exclude-classes: ();
  
  @each $higher-bp in $higher-bps {
    $exclude-classes: append($exclude-classes, get-display-classes($higher-bp), 'comma');
  }

  // 生成当前断点的隐藏规则
  .d-#{$bp}-none:not(#{if($exclude-classes, $exclude-classes, '')}) *:is(#{$tabbable-selectors}) {
    display: none !important;
  }
}

// 单独处理无断点的.d-none规则
.d-none:not(#{get-display-classes('sm')}, #{get-display-classes('md')}, #{get-display-classes('lg')}, #{get-display-classes('xl')}) *:is(#{$tabbable-selectors}) {
  display: none !important;
}

重构亮点：

• 用$breakpoints列表统一管理断点，新增断点时只需修改列表即可
• 通过slice自动获取当前断点之后的更大断点，避免手动编写:not()内的所有排除类
• 优化了tabbable-selectors，排除了tabindex="-1"的元素（这类元素本就无法通过Tab键聚焦），同时完善了contenteditable的匹配逻辑
• 函数逻辑复用，减少重复代码

潜在bug与改进建议 #

1. display:none !important的副作用
   强制设置display:none会完全移除元素的布局空间，可能破坏页面的响应式布局逻辑。如果仅需让元素不可聚焦，更温和的方案是：

   // 替代display:none的方案，保留布局空间同时阻止焦点
   pointer-events: none;
   tabindex: -1 !important;
   visibility: hidden;
   

2. 可聚焦元素选择器的遗漏

   • 未考虑原生可聚焦的summary元素，可补充到tabbable-selectors中
   • 部分自定义可聚焦组件可能通过JS绑定焦点事件，这类情况无法通过CSS覆盖，需配合PrimeNG的焦点陷阱逻辑做额外判断

3. 响应式规则的优先级问题
   Bootstrap的响应式类是基于断点从小到大生效的，当前代码的:not()排除逻辑是正确的，但如果遇到优先级冲突，可在选择器前添加父容器类（如.app-container）提升优先级，避免被其他样式覆盖。

4. 未覆盖打印类
   如果需要处理d-print-none这类打印隐藏类，可在$breakpoints列表中添加print，并调整函数逻辑适配打印媒体查询。

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