Merge pull request #949 from 3YOURMIND/fix-table-row-data-test

fix(KtTable): use attrs instead of domProps for specific attributes
3YOURMIND · Jun 20, 2024 · 009f2dc · 009f2dc
2 parents 49936e6 + 5b6aca2
commit 009f2dc
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 14 deletions.
diff --git a/packages/kotti-ui/source/kotti-table/components/TableBody.ts b/packages/kotti-ui/source/kotti-table/components/TableBody.ts
@@ -46,10 +46,6 @@ export const TableBody: any = {
 
 						return [
 							h(TableRow, {
-								domProps: {
-									// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-									'data-test': `table:element:${row.number}:${row.title}`,
-								},
 								key,
 								props: {
 									row,

diff --git a/packages/kotti-ui/source/kotti-table/components/TableBodyExpandRow.ts b/packages/kotti-ui/source/kotti-table/components/TableBodyExpandRow.ts
@@ -18,9 +18,7 @@ export const TableBodyExpandRow: any = {
 				h(
 					'td',
 					{
-						domProps: {
-							colSpan,
-						},
+						attrs: { colSpan },
 						class: 'kt-table__expanded-cell',
 					},
 					[renderExpand?.(h, { row, data: row, rowIndex })],

diff --git a/packages/kotti-ui/source/kotti-table/components/TableBodyLoadingRow.ts b/packages/kotti-ui/source/kotti-table/components/TableBodyLoadingRow.ts
@@ -20,9 +20,14 @@ export const TableBodyLoadingRow: any = {
 		const { colSpan, render } = this
 
 		return h('tr', {}, [
-			h('td', { domProps: { colSpan }, class: 'kt-table__loader' }, [
-				render(h),
-			]),
+			h(
+				'td',
+				{
+					attrs: { colSpan },
+					class: 'kt-table__loader',
+				},
+				[render(h)],
+			),
 		])
 	},
 }
diff --git a/packages/kotti-ui/source/kotti-table/components/TableRow.ts b/packages/kotti-ui/source/kotti-table/components/TableRow.ts
@@ -183,10 +183,14 @@ export const TableRow: any = {
 			'tr',
 			{
 				class: _trClasses,
-				domProps: {
-					role: isInteractive && !isDisabled ? 'button' : false,
+				attrs: {
+					// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+					'data-test': `table:element:${row.number}:${row.title}`,
 					tabIndex: isInteractive && !isDisabled ? 0 : false,
 				},
+				domProps: {
+					role: isInteractive && !isDisabled ? 'button' : undefined,
+				},
 				on: {
 					click: ($event: MouseEvent) => handleClick($event, row, rowIndex),
 					focus: ($event: FocusEvent) => handleFocus($event, row, rowIndex),
@@ -231,9 +235,11 @@ export const TableRow: any = {
 								[
 									h('label', { class: 'form-checkbox' }, [
 										h('input', {
-											domProps: {
+											attrs: {
 												checked: isSelected,
 												disabled: isDisabled,
+											},
+											domProps: {
 												type: 'checkbox',
 											},
 											on: {

diff --git a/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts b/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts
@@ -75,7 +75,7 @@ export const TableRowCell: any = {
 					'div',
 					{
 						class: _cellClass,
-						domProps: {
+						attrs: {
 							'data-prop': column.prop,
 						},
 					},