Allow mouseclick on unfocused table cell with row navigation

docs/demos/14-row-navigation/index.html

@@ -803,8 +803,14 @@ <h2>Row navigation</h2>
                     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

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 `<tr>` 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 `<tr>` 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.
+Fires when the context menu is closed.

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, {

src/config.ts

@@ -50,6 +50,7 @@ export const defaultConfig: DataTableConfiguration = {
     hiddenHeader: false,
     caption: undefined,
 
+    // for keyboard navigation
     rowNavigation: false,
     tabIndex: false,
 

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)
     }