matty/peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dynamic tables: focus to first input when adding a row.

Browse Source
This commit is contained in:
John Livingston
2024-06-12 15:43:09 +02:00
parent 72c4b0804d
commit a4a9f85956
2 changed files with 31 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
client/common/lib/elements/dynamic-table-form.ts
View File

@ -140,7 +140,7 @@ export class DynamicTableFormElement extends LivechatElement {
return Object.fromEntries([...Object.entries(this.schema).map((entry) => [entry[0], entry[1].default ?? ''])])
}
private readonly _addRow = (): void => {
private async _addRow (): Promise<void> {
const newRow = this._getDefaultRow()
// Create row and assign id and original index
this._rowsById.push({ _id: this._lastRowId++, _originalIndex: this.rows.length, row: newRow })
@ -148,6 +148,17 @@ export class DynamicTableFormElement extends LivechatElement {
this.requestUpdate('rows')
this.requestUpdate('_rowsById')
this.dispatchEvent(new CustomEvent('update', { detail: this.rows }))
// Once the update is completed, we give focus to the first input field of the new row.
await this.updateComplete
// Note: we make multiple querySelector, to be sure to not get a nested table.
// We want the top level table associated tr.
const input = this.querySelector('table')?.querySelector(
'&>tbody>tr:last-child>td input:not([type=hidden]),&>tbody>tr:last-child>td livechat-tags-input'
)
if (input) {
(input as HTMLElement).focus()
}
}
private async _removeRow (rowId: number): Promise<void> {