Skip to content

[Checkbox] lazyLoad 隐藏阶段键盘操作会抛出异常 #6854

Description

@zhangpaopao0609

关联

问题描述

开启 lazyLoad 后,在元素进入视口前,Checkbox 仍渲染可聚焦的 <label tabindex="0">,但内部 input 尚未渲染。此时按 Enter 或 Space,键盘处理函数会对 null 直接解构:

const { disabled } = (e.currentTarget as HTMLElement).querySelector('input');
!disabled && handleChange(e);

复现

  1. 为 Checkbox 设置 lazyLoad=true
  2. 使用 IntersectionObserver,使其保持未相交状态;
  3. 聚焦根 label;
  4. 按 Enter 或 Space。

也可以直接对一个不含 input 的 label 调用 useKeyboardEvent 注册的 keydown listener。

实际结果

  • 按键默认行为先被阻止;
  • 随后因 querySelector('input') 返回 null 抛出 TypeError;
  • Checkbox 状态不变。

预期结果

懒加载隐藏阶段的键盘操作不应抛错。可以对 input 做空值保护,或让根节点的可聚焦状态与可交互内容保持一致;显示后仍应保留正常的 Enter/Space 操作。

补充说明

该问题是在基于最新 develop9e47c828a)完全重写 Checkbox 单元测试时发现。测试 PR 不修改源码,会按当前真实行为保留特征测试;源码修复时应同步更新断言。

Metadata

Metadata

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions