Table loses focus after a Scroller redraw
Table loses focus after a Scroller redraw
Hello,
First off, I want to thank you for the great plugin!
I've spotted an issue with the Scroller plugin and IE. The configuration:
- DataTables 1.10.x
- Scroller 1.3.0+
You can use the Server-side processing Scroller example for reproduction:
https://datatables.net/extensions/scroller/examples/initialisation/server-side_processing.html
Reproduction steps:
1. Load any page that uses the "Scroller" plugin.
2. Focus the table by clicking on any row.
3. Scroll down using the keyboard arrow keys or the mouse wheel. Cause the Scroller plugin to do a redraw.
4. After the redraw, try scrolling the DataTable with the arrow keys.
You'd expect to still have focus on the table. Instead, the arrow keys will now scroll the main page.
Affected browsers:
IE 9 (both vanilla and via compatibility mode);
IE 10 (both vanilla and via compatibility mode);
IE 11.
Cause:
When focusing the table (step 2), IE sets the document.activeElement to be the td you clicked on. When a Scroller redraw occurs, a new batch of data is loaded. The td is no longer present in the DOM. Since the TD is no longer present, IE sets activeElement to be null and your DataTable is no longer focused.
Proposed solution:
Check if the table (or any child actually) was focused before firing a redraw the plugin's in _fnScroll.
Then, include something along the lines of:
if (document && !document.activeElement && this.s.wasTableFocused) {
jQuery(this.dom.table).focus();
}
in the plugin's _fnDrawCallback.
Cheers and thanks for your time.