Bug Report: "Cancel changes" table event handler executed out of order

[johnwp]

Steps to reproduce:

1. Add a "Cancel changes" event handler to a table with an editable column
2. Make a change to the cell of an editable column
3. Press the "Cancel" button on table footer
4. Observe unexpected behavior: "Cancel changes" handler is executed before table.changeSet and table.recordUpdates are cleared.

Expected behavior: "Cancel changes" handler is executed after table.changeSet and table.recordUpdates are cleared.

[Tess]

Hi @johnwp Thanks for reaching out about this! I am working on testing this, but am having trouble reproducing the same behavior.

How are you confirming that the changeSet & recordUpdates aren't cleared yet? Are you referencing them in the validateEditableRows query?

[johnwp]

Hi Tess,

Yes, that's correct.

When cancel changes is triggered, I want to re-run the validateEditableRows query based on an empty changeSet, essentially resetting any validation errors previously returned by validateEditableRows. The problem seems to be that the changeSet still contains the changes when cancel changes triggers validateEditableRows.

[Tess]

Any chance we can see an app export or a screenshot of the validateEditableRows query?

So far, I tried returning the changeSet in my on "Cancel changes" event, but it was empty. I also tried disabling the on Cancel changes event if there are items in the changeSet. On my side, this caused the cancel changes event to not trigger at all.

[lamh_bytecode.io]

Hello,

I could not replicate it as well. My only theory is the amount of changes the table needs to undo...just theory. However, one possible work around is as follow.

Create a dummy Query JSON with SQL and select your table recordUpdates, limit to 1 record and 1 value is fine too. Run your query on success of this Query JSON with SQL

On the advanced tab, set "Watched inputs" and disable query if recordUpdates greater than 0

This way it will trigger ONLY when length goes from 1 to 0. So it will run after canceled and after saved. It's essentially a hacky way to watch the recordUpdates/changeSet collection. It's definitely not elegant solution.

[johnwp]

Hi @Tess ,

Sure, below is a copy of validateEditableColumns.

This gets triggered on the following table events.

• Cell change
• Refresh
• Filter change
• Cancel changes

const { recordUpdates } = tableCreate;

console.log("recordUpdates ", recordUpdates);

if (recordUpdates?.length === 0) {
  return [];
}

return recordUpdates.reduce((acc, rec) => {
  const {
    "Custom Column 2": paymentDate,
    "Custom Column 3": paymentAmount,
  } = rec;

  const isPaymentAmountInvalid_negative =
    paymentAmount !== undefined && paymentAmount < 0;

  const isPaymentAmountInvalid_moreThanBalance =
    paymentAmount !== undefined && paymentAmount > rec.utilityTotalDue;

  const isPaymentDateInvalid_priorToToday =
    paymentDate !== undefined &&
    new Date(new Date(paymentDate).setHours(24, 0, 0, 0)) <
      new Date(new Date().setHours(0, 0, 0, 0));

  const isPaymentDateInvalid_weekend =
    paymentDate !== undefined &&
    (moment(paymentDate).format("dddd") === "Saturday" ||
      moment(paymentDate).format("dddd") === "Sunday");

  if (isPaymentAmountInvalid_negative) {
    utils.showNotification({
      title: "Remittance amount warning",
      description: "Remittance amount is a negative value",
      notificationType: "warning",
    });
  }

  if (isPaymentAmountInvalid_moreThanBalance) {
    utils.showNotification({
      title: "Remittance amount warning",
      description: "Remittance amount is more than balance",
      notificationType: "warning",
    });
  }

  if (isPaymentDateInvalid_priorToToday) {
    utils.showNotification({
      title: "Remittance date warning",
      description: "Remittance date is prior to today",
      notificationType: "warning",
    });
  }

  if (isPaymentDateInvalid_weekend) {
    utils.showNotification({
      title: "Remittance date warning",
      description: "Remittance date falls on a weekend",
      notificationType: "warning",
    });
  }

  acc.push({
    ...rec,
    isPaymentAmountInvalid:
      isPaymentAmountInvalid_negative || isPaymentAmountInvalid_moreThanBalance,
    isPaymentDateInvalid:
      isPaymentDateInvalid_priorToToday || isPaymentDateInvalid_weekend,
  });

  return acc;
}, []);

[Tess]

Hi @johnwp any chance you can share a screen recording? I'm still not able to reproduce this with your code

Out of curiosity, if you make a new table with less complexity (just some dummy data), do you see the same behavior?