3.5 KiB
3.5 KiB
@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 多行换行。方向键那几条断言的是光标真的动了 / 选区真的变了,而不只是「没跳格」。 - 文档新增「键盘:单击即编辑,方向键分工」一节。