diff --git a/docs/demos/14-row-navigation/index.html b/docs/demos/14-row-navigation/index.html
index ca41f5c5..01b6c08f 100644
--- a/docs/demos/14-row-navigation/index.html
+++ b/docs/demos/14-row-navigation/index.html
@@ -803,8 +803,14 @@ Row navigation
data.selected = false
})
- table.on("datatable.selectrow", (rowIndex, event) => {
+ table.on("datatable.selectrow", (rowIndex, event, focused) => {
+
+ if (!focused) {
+ return
+ }
+
event.preventDefault()
+
const row = table.data.data[rowIndex]
if (row.selected) {
row.selected = false
diff --git a/docs/documentation/Events.md b/docs/documentation/Events.md
index 9412905e..1f05d9d6 100644
--- a/docs/documentation/Events.md
+++ b/docs/documentation/Events.md
@@ -82,10 +82,17 @@ dataTable.on('datatable.search:before', function(query, matched) {
### `datatable.selectrow`
Fires when user selects a row - either by mouse click on a row or using `Space`/`Enter` during keyboard based navigation (requires option [[rowNavigation]]).
-Two arguments are available: `row` which returns the `` element that was selected and `event` which returns the event that caused the selection. You can run `event.preventDefault()` like this:
+Three arguments are available:
+
+ * `row` which returns the `
` element that was selected,
+ * `event` which returns the event that caused the selection,
+ * `focused` (true/false) which returns whether the table had focus when the row was selected.
+
+
+ You can run `event.preventDefault()` like this:
```javascript
-dataTable.on("datatable.selectrow", (rowIndex, event) => {
+dataTable.on("datatable.selectrow", (rowIndex, event, focused) => {
event.preventDefault();
...
});
@@ -114,7 +121,7 @@ Fires before the `.update()` method is called.
Fires when the editor is initialized.
### `editable.save.cell`
-Fires when the cell is saved (even when the value is not actually updated).
+Fires when the cell is saved (even when the value is not actually updated).
### `editable.save.row`
Fires when the row is saved.
@@ -123,4 +130,4 @@ Fires when the row is saved.
Fires when the context menu is opened.
### `editable.context.close`
-Fires when the context menu is closed.
\ No newline at end of file
+Fires when the context menu is closed.
diff --git a/docs/documentation/Upgrading.md b/docs/documentation/Upgrading.md
index b6c5602e..1e45c688 100644
--- a/docs/documentation/Upgrading.md
+++ b/docs/documentation/Upgrading.md
@@ -1,8 +1,43 @@
## Upgrading
-### From 8.0.x to 9.0.x
+### From 9.x.x to 10.x.x
-- The type of [`datatable.data.data`](API#data) (the list of rows) has changed from `object[]` to `{ attributes: object, cells: object[] }[]`. To access the content cells it is now necessary to access the `cells` attribute present in each row. Instead of:
+- The `datatable.selectrow` event is now fired even if the table has no focus.
+There is a new third argument `focused` which describes whether or not the element had focus. If you want to ignore
+mouse clicks when the table is not focused in combination with row navigation, you can check for `focused` being `true`:
+
+```js
+dataTable.on("datatable.selectrow", function (row, event, focused) {
+ if (!focused) {
+ return;
+ }
+
+ event.preventDefault();
+ // Do something with the row
+ ...
+});
+```
+
+If you do want to allow for row selection even when the table is not focused, you may also want to add focus to the table when a row is clicked:
+
+```js
+dataTable.on("datatable.selectrow", function (row, event, focused) {
+ if (!focused) {
+ dataTable.dom.focus();
+ }
+
+ event.preventDefault();
+ // Do something with the row
+ ...
+});
+```
+
+
+### From 8.x.x to 9.x.x
+
+- The type of [`datatable.data.data`](API#data) (the list of rows) has changed from `object[]` to
+`{ attributes: object, cells: object[] }[]`. To access the content cells it is now necessary to access the
+`cells` attribute present in each row. Instead of:
```js
const dt = new DataTable(myTable, {
diff --git a/src/config.ts b/src/config.ts
index 92ec2a70..b35acb1b 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -50,6 +50,7 @@ export const defaultConfig: DataTableConfiguration = {
hiddenHeader: false,
caption: undefined,
+ // for keyboard navigation
rowNavigation: false,
tabIndex: false,
diff --git a/src/datatable.ts b/src/datatable.ts
index 1f0ef685..a463103a 100644
--- a/src/datatable.ts
+++ b/src/datatable.ts
@@ -626,35 +626,22 @@ export class DataTable {
this.page(this._currentPage+1)
}
} else if (["Enter", " "].includes(event.key)) {
- this.emit("datatable.selectrow", this.rows.cursor, event)
- }
- })
- this.dom.addEventListener("mousedown", (event: Event) => {
- const target = event.target
- if (!(target instanceof Element)) {
- return
- }
- if (this.dom.matches(":focus")) {
- const row = Array.from(this.dom.querySelectorAll("tbody > tr")).find(row => row.contains(target))
- if (row && row instanceof HTMLElement) {
- this.emit("datatable.selectrow", parseInt(row.dataset.index, 10), event)
- }
- }
-
- })
- } else {
- this.dom.addEventListener("mousedown", (event: Event) => {
- const target = event.target
- if (!(target instanceof Element)) {
- return
- }
- const row = Array.from(this.dom.querySelectorAll("tbody > tr")).find(row => row.contains(target))
- if (row && row instanceof HTMLElement) {
- this.emit("datatable.selectrow", parseInt(row.dataset.index, 10), event)
+ this.emit("datatable.selectrow", this.rows.cursor, event, true)
}
})
}
+ this.dom.addEventListener("mousedown", (event: Event) => {
+ const target = event.target
+ if (!(target instanceof Element)) {
+ return
+ }
+ const row = Array.from(this.dom.querySelectorAll("tbody > tr")).find(row => row.contains(target))
+ if (row && row instanceof HTMLElement) {
+ this.emit("datatable.selectrow", parseInt(row.dataset.index, 10), event, this.dom.matches(":focus"))
+ }
+ })
+
window.addEventListener("resize", this._listeners.onResize)
}