fix(ui-common): prevent null values for string cells in HandsonTable component

[hdinia]

fix #1663

-This Pull Request addresses an issue in the TableMode, when you press the delete button, the default behavior is to set the cell value to null. This behavior is now modified so that the cell's value is set to an empty string ("") instead.

Note: only string inputs are concerned

[commit-lint]

Bug Fixes

• ui-common: prevent null values for string cells in HandsonTable component (e9eb98c)

Contributors

skamril

Commit-Lint commands

You can trigger Commit-Lint actions by commenting on this PR:

• @Commit-Lint merge patch will merge dependabot PR on "patch" versions (X.X.Y - Y change)
• @Commit-Lint merge minor will merge dependabot PR on "minor" versions (X.Y.Y - Y change)
• @Commit-Lint merge major will merge dependabot PR on "major" versions (Y.Y.Y - Y change)
• @Commit-Lint merge disable will desactivate merge dependabot PR
• @Commit-Lint review will approve dependabot PR
• @Commit-Lint stop review will stop approve dependabot PR

[skamril]

No. Like I said, nextValue is not necessary a string.

[hdinia]

correct me if I am wrong but null value is possible only on strings. when you press delete on booleans true or false only is possible. on numbers inputs this behavior is disabled.

So I dont see in what case we can have an other type than string that is null ?

[hdinia]

EDIT:

afterChange event in Handsontable provides the previous value of the cell prevValue, in addition to nextValue. We can leverage this to determine if the cell was originally a string. If it was, and if nextValue is null, we can then replace it with an empty string. This ensures that we only replace null with "" for cells that were originally strings.

  const handleAfterChange: HandsontableProps["afterChange"] =
    function afterChange(this: unknown, changes, ...rest): void {
      changes?.forEach(([row, column, prevValue, nextValue]) => {
        if (typeof prevValue === "string" && nextValue === null) {
          setValue(`${data[row].id}.${column}`, "");
        } else {
          setValue(`${data[row].id}.${column}`, nextValue);
        }
      });
      restProps.afterChange?.call(this, changes, ...rest);
    };

Tested, it works as expected, I dont see a better solution if this does not suits you I let you provide a better one

[skamril]

Use beforeChange instead, because is called before re-render.

const handleBeforeChange: HandsontableProps["beforeChange"] =
  function beforeChange(this: unknown, changes, ...rest): void {
    changes.forEach(([row, prop, oldValue, newValue]) => {
      if (restProps.allowEmpty && typeof oldValue === "string" && newValue === null) {
        // You must mutate the value
        changes[row][3] = '';
      }
    });
    restProps.beforeChange?.call(this, changes, ...rest);
  }

Add it to the HandsonTable component.