Multiple KeyTable instances across multiple tables
Multiple KeyTable instances across multiple tables
sliekens
Posts: 97Questions: 17Answers: 2
I have two <table> elements on a single page. Each table element is associated to its own private DataTable instance (instead of a single DataTable instance that wraps multiple table elements). I would like to use KeyTable for keyboard navigation and Editor for inline editing in both tables.
The problem that I'm having is that all KeyTable instances listen for keydown events on the document element. In other words: when I press a key, all tables on my page respond to that key. This tends to break the code in unexpected ways because KeyTable event handlers are executed in a state that would not be possible if there was only a single table.
Example:
Focus a cell in one table and press enter to activate inline editing. All other tables on the page will also respond to the keypress, but the code will crash because there is no lastFocus.cell for Editor to start inline editing.
I don't know how to get around this since keypresses are handled globally instead of per table.
Replies
I made a couple of changes to relieve my pain: https://github.com/StevenLiekens/KeyTable/commits/fixes
I'm still looking for a definitive fix.
Thanks for flagging this up. It should really only be possible to have focus on a single table at a time. What I'll do is look into a way to remove focus from any other tables when a cell gains focus itself.
Regards,
Allan
That sounds like a great solution. Thanks.
By the way, my example in the first post is wrong so don't worry about it. The code in the example does not crash under the conditions that I specified.
My app has some funny conditions under which it does crash: cells that have focus can be removed from the DOM without being blurred first.
It turns out that I have a similar problem with the Select plugin.
Select attaches a
clickhandler to the<body>element to determine if a click should blur the current selection. This does not work well with multiple tables.I expect to be able to select rows from multiple tables simultaneously. I expect that clicking outside the tables should blur the selected rows in all tables. The actual behavior is that only the selected rows of the last table on the page are blurred.
The issue is somewhere in
enableMouseSelectionof the dataTables.select.js file. For some reason,disableMouseSelectionis always called first. This removes the body's click handlers for all but the last table.Thanks! I've added that to the list as well
.
Allan
-edit- never mind, my assumptions were wrong
I'm only having problems because I prevent blurable from blurring the cell. The standard behavior is as you describe:
(but only if Blurable is enabled on all tables)