I was asked to add keyboard support for the selection as well, so I added a custom JS script with a event key listener, which works fine! (I didn’t get to grips with the dash extension and JS seemed simpler):
document.addEventListener('keydown', (event) => {
var name = event.key;
var code = event.code;
if (code.includes('ArrowLeft')) {
var element = document.getElementById("div1");
element.classList.toggle("selected");}}, false);
However, lets say I de-select the div with a key press and re-select it with a click, the Dash callback does not register the toggled class name and gives me the class name as if the keypress had not happened. Is there some server caching going on that I can disable, or how do I best go about this? Would really appreciate some feedback here!
Hi, wouldn’t it make more sense to use the div1 className as a State rather than an input (in the callback).
Also you might want to add some additional logging or perform some debugging to see which code paths are actually executed (although the outcome might be obviously wrong, for now)
I just changed it to State and its still the same problem. How would you step through this in the debugger? Breakpoints and logging outputs inside the dash callback show that the className which is passed into the callback is wrong, ie its not the one I toggled and its also not the one shown on the div in the inspected element in chrome.
What you are experiencing is a syncing issue better react and the dom.
You should instead do something like this:
document.addEventListener('keydown', (event) => {
var name = event.key;
var code = event.code;
if (code.includes('ArrowLeft')) {
var element = document.getElementById("div1");
element.dispatchEvent(new Event('click'))
If that doesnt work, then use it like this:
document.addEventListener('keydown', (event) => {
var name = event.key;
var code = event.code;
if (code.includes('ArrowLeft')) {
var element = document.getElementById("div1");
element.dispatchEvent(new Event('mousedown'))
element.dispatchEvent(new Event('click'))
element.dispatchEvent(new Event('mouseup'))
Since your div is already registering with n_clicks.
thanks for welcoming me and thank you for your input! I’ve built some fun and some very useful things with Dash so far, this time round I might feel a little too comfortable and misuse it for an MVC style problem, albeit a simple one…
Sadly your code suggestion did not work, both ways neither registered in the frontend nor in the backend… however (!), this little guy does the trick:
document.addEventListener('keydown', (event) => {
var name = event.key;
var code = event.code;
if (code.includes('ArrowLeft')) {
var element = document.getElementById("div1");
element.click()