Multiple KeyTable instances across multiple tables

Multiple KeyTable instances across multiple tables

sliekenssliekens 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

  • sliekenssliekens Posts: 97Questions: 17Answers: 2

    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.

  • allanallan Posts: 63,368Questions: 1Answers: 10,449 Site admin

    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

  • sliekenssliekens Posts: 97Questions: 17Answers: 2

    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.

  • sliekenssliekens Posts: 97Questions: 17Answers: 2
    edited February 2017

    It turns out that I have a similar problem with the Select plugin. :worried:

    Select attaches a click handler 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 enableMouseSelection of the dataTables.select.js file. For some reason, disableMouseSelection is always called first. This removes the body's click handlers for all but the last table.

  • allanallan Posts: 63,368Questions: 1Answers: 10,449 Site admin

    Thanks! I've added that to the list as well :smile:.

    Allan

  • sliekenssliekens Posts: 97Questions: 17Answers: 2
    edited February 2017

    -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:

    It should really only be possible to have focus on a single table at a time.

    (but only if Blurable is enabled on all tables)

This discussion has been closed.