Files
workspace/code/g3soft-libs/.changeset/table-keyboard-arrows-enter.md
T
2026-10-15 22:47:42 +08:00

3.5 KiB
Raw Blame History

@g3soft/ui
@g3soft/ui
minor

G3Table 键盘:方向键显式分工(左右归输入框、上下给表格导航)、Enter 确认并下移、多行编辑器回车换行。

单击格仍直接进入编辑 —— 本组件的既有交互不变,这次只调整键盘分工与几处不符习惯的行为。

  • 方向键显式分工。此前方向键全部被输入框吃掉(编辑器一挂上就聚焦),想改中间一位时整格跳走、想换行时又只能靠 Tab —— 两个方向都别扭。现在:
    • 左右 → 交给输入框移动光标 / Shift+左右 选中文本(编辑文本的刚需,不能让出去);
    • 上下(单行)→ 让给表格导航,切到上 / 下一行的同一列并进入编辑(单行输入框里上下键没有任何原生用途,让出去是零损失);
    • Shift+上下 → 仍归输入框(原生语义是「选中到首尾」);
    • textarea 里的上下 → 仍归输入框(要跨行移动光标)。
    • ⚠️ 左右不能让给表格:同一个键不可能既移光标又切格。横向切换用 Tab(它还会跳过只读列,比按列 ±1 更贴合录入语境)。
  • Enter(单行)= 确认 + 下移到下一行同列(Excel / Sheets / AG Grid / Handsontable 的通行约定)。
    • 旧行为是 preventDefault + select() —— 全选文本,且不提交。它既不是浏览器行为(单行 input 的 Enter 原生是「提交表单 / 无动作」,不换行),也不是表格软件的行为,而且「确认」这个动作整个缺失:改完按回车值还没落库。
    • 下一行同一列若是只读列、或那一行被按行禁用 → 跳过,落到下面第一个可编辑格;到表尾 → 停在原地(不循环回表头:回车一路按到底突然跳回第一行会很意外)。
    • ⚠️ 实现上必须显式提交当前值:移动会让编辑器 vnode 卸载,而 DOM 元素被移除时浏览器不派发 blur(做日期编辑器时踩过这个坑),只靠 onBlur 的话敲完按回车值就丢了。
  • Enter(type: 'textarea')= 换行(浏览器原生语义)。此前多行与单行共用同一段 onKeydown 且没按类型分流,导致备注这类多行格按回车会把整段文本全选掉、根本换不了行。
  • Esc 会退出编辑态并把焦点还给该格。此前它只让输入框失焦,而编辑态是行级的、那一行仍停在编辑态(表现是「Esc 一下没反应」);更要紧的是焦点掉到 body —— 之后按方向键完全不经过表格,等于键盘失灵。
  • checkbox 补上 Space 切换(原生 checkbox 的切换键);Enter 保留(表格用户的既有期待,连续录入时手不离 Enter)。此前只认 Enter。
  • date 编辑器按同一套分工:左右归输入框(日期是文本,用户会想改其中一段),上下给导航。
  • 配套:playground 新增 table-keys-wrap 小表(text / number / textarea 三列,行高给足以容纳多行编辑器)作为宿主 —— table-wrap 的列序被 Tab 跳格用例逐格锁着,且它里面没有多行编辑器,锁不住「单行 / 多行 Enter 语义不同」这条区分。
  • e2e 新增 7 条:方向键分工 5 条(单击即编辑 / 上下切行 / 左右移光标 / Shift+左右 选文本 / textarea 跨行)、Enter 单行确认下移、Enter 多行换行。方向键那几条断言的是光标真的动了 / 选区真的变了,而不只是「没跳格」。
  • 文档新增「键盘:单击即编辑,方向键分工」一节。