Strange behavior on Confirmation Modal

App Building
1

I have an action button named Delete in a table (called movieTable for this example) that runs a query deleteMovie to Delete the given row.

In the deleteMovie query, I use the Show a confirmation modal before running option to show a dynamic confirmation message. I am using javascript to call a transformer, like this (made everything a movie to obfuscate the real values):

{{movieDeleteWarningTransformer.value}}

The transformer has logic that looks like the following to change the message depending on the table’s contents:

let movieDeleteMessage = `Are you sure you want to delete this movie?`;
let actorsCount = parseInt({{movieTable.selectedRow.data.actors_count}});
let key = {{movieTable.selectedRow.data.key}}

if (actorsCount > 0) {
    movieDeleteMessage = `Movie ${key} has ${actorsCount} associated actors, are you sure you want to delete it?`;
}

return movieDeleteMessage

This all works just fine on first click. The problem is when you go from one row to another. For instance, say I clicked Delete on row 1 by accident and hit the Cancel button on the confirmation modal and then clicked Delete again on row 2. For some reason, row 2 is giving me the message from row 1! It’s as if it’s cached or something. If I hit cancel on the confirmation modal on row 2 now and hit Delete again, now it gives me the correct message with row 2 values…

Am I doing something wrong? Very sorry for the super long message…

Thanks for your help!

3

Hey @gilcrest! Good to hear from you again. Long questions are always helpful :slight_smile:

My suspicion is that it has to do with the .selectedRow property - I think that when you click on the action button in Row 2, the modal is opening and rendering, and then the .selectedRow property gets updated (because the button click comes before the row select). Indeed, I was able to repro this locally - if you look carefully, the table row is getting selected in the UI slightly after the confirmation modal opens.

@kent and I were able to figure out two workarounds - pick your poison:

  1. Move all of the transformer logic into inline Javascript in the confirmation modal

So in the "Confirmation message" setting, instead of referencing the value of your transformer, you could just have all the logic there. Something like:

{{
  parseInt(movieTable.selectedRow.data.actors_count) > 0 ? `Movie ${{{movieTable.selectedRow.data.key}}} has ${ parseInt(movieTable.selectedRow.data.actors_count)} associated actors, are you sure you want to delete it?` : "Are you sure you want to delete this movie?"
}}

Not ideal, but it should work!

  1. Trigger your delete query through a JS Code query with timeout

If instead of triggering your delete query directly from the action button, and instead you create an intermediate JS Code query that runs this, things should work: setTimeout(deletequery.trigger(), 10). The 10 ms timeout seems to solve the problem. Trigger this JS Code query from the action button.

Having said all of that, we should just fix this and have the row select before the action button runs its query. Sorry for the bug :confused:

4

No problem - thanks very much @justin and @kent for digging into this! I’m going to use option 1 for now as it seems a bit more solid… I’ll just leave this like this until you fix the bug. It’s probably a pretty uncommon scenario, so I’m sure it’s not super high on your list, so just let me know whenever you get a chance.

Thanks again!!!

Dan

1 Like