iter(g261): 删除标签后焦点归还输入框
This commit is contained in:
@@ -40,7 +40,10 @@ export function inputTag(props: InputTagProps): HTMLElement {
|
||||
type: 'button',
|
||||
class: 'ua-tag-close',
|
||||
'aria-label': `移除标签 ${tag}`,
|
||||
onClick: () => put(props.value().filter((item) => item !== tag)), // 按值删,不用索引(外部可能已改序)
|
||||
onClick: () => {
|
||||
put(props.value().filter((item) => item !== tag)); // 按值删,不用索引(外部可能已改序)
|
||||
input.focus(); // 焦点归还:chip 一删按钮就消失,不接住焦点会掉回 body
|
||||
},
|
||||
}, '×');
|
||||
root.insertBefore(h('span', { class: 'ua-tag' }, h('span', {}, tag), close), input);
|
||||
}
|
||||
|
||||
@@ -3971,7 +3971,7 @@
|
||||
"example": "const tags = signal(['前端', '设计']);\ninputTag({ value: tags, max: 5, onChange: (list) => console.log(list.length) })",
|
||||
"steps": [
|
||||
"传一个 signal<string[]> 作为 value:回车或逗号把当前输入转成 chip,写回信号后立即重画",
|
||||
"点 chip 上的 × 删除单个标签;输入框为空时按退格键删掉最后一个(手不离键盘也能改)",
|
||||
"点 chip 上的 × 删除单个标签,删完焦点交回输入框(chip 一删按钮就消失,不接住焦点键盘用户要从头 Tab);输入框为空时按退格键删掉最后一个(手不离键盘也能改)",
|
||||
"输入后直接失焦也会成标签,不必强行回车;max 满额后输入框禁用,占位文案变成「最多 N 个标签」",
|
||||
"要区分大小写重复判断就传 allowDuplicate: true;默认按原样去重",
|
||||
"样式复用输入组与标签:外框聚焦光环、chip 圆角与语义色都跟既有组件一致,无新增视觉字面量"
|
||||
|
||||
Reference in New Issue
Block a user