onEditComplete callback not firing when editible prop updated from 'false' to 'true'

[patrick-y-pokeratlas]

• @inovua/reactdatagrid-enterprise
• version 5.2.1

Relevant code or config

import { Button } from "@material-ui/core";
import ReactDataGrid from "@inovua/reactdatagrid-enterprise";
import "@inovua/reactdatagrid-enterprise/index.css";

const DATA_SOURCE = [
  { id: "ke5764", name: "Manny", city: "Los Angeles" },
  { id: "af3165", name: "Moe", city: "New York" },
  { id: "xn9266", name: "Jack", city: "Dallas" }
];

const gridStyle = { minHeight: 180 };

const columns = [
  { name: "id", header: "Id", defaultVisible: false, defaultWidth: 80 },
  { name: "name", header: "Name", defaultFlex: 1 },
  { name: "city", header: "City", defaultFlex: 1 }
];

export default function App() {
  const [dataSource, setDataSource] = useState(DATA_SOURCE);
  // RETURN/TAB event not firing onEditComplete
  // - If initial value is 'true' editing works as expected (can toggle enabled/disabled)
  // - If initial value is 'false' onEditComplete is not called when editing is enabled
  const [isEditable, setIsEditable] = useState(false);

  const onEditComplete = useCallback(
    ({ columnId: name, value, data: { id } }) => {
      const data = dataSource.map((item) =>
        item.id === id ? { ...item, [name]: value } : item
      );
      setDataSource(data);
    },
    [dataSource]
  );

  return (
    <div>
      <ReactDataGrid
        idProperty="id"
        style={gridStyle}
        onEditComplete={onEditComplete}
        editable={isEditable}
        columns={columns}
        dataSource={dataSource}
      />
      <Button variant="contained" onClick={() => setIsEditable(!isEditable)}>
        {isEditable ? "Editing Enabled" : "Editing Disabled"}
      </Button>
    </div>
  );
}

What you did: updated 'editable' prop from an initial value of false to a value of true via a useState boolean.

What happened: when editing a cell value, the value reverted when the cell lost focus (RETURN or TAB) instead of updating via the onEditComplete function provided.

Reproduction repository: codesandbox.io/s/on-edit-complete-b3g5cq

Problem description: if editable prop is initially set to false and then set to true, onEditComplete callback does not fire when RETURN or TAB blurs the active cell. If editable prop is initially set to true, the onEditComplete callback works as expected.

Suggested solution: a temporary workaround has been implemented that sets the default editable prop value to 'true' and then, after half a second, updates to 'false'. It has been working reliably.

[inovua-admin]

Fixed in version 5.2.4.