auto commit on lost focus when editing?

[peasonokay]

Hi, so when i allow users to edit fields they tab from column to column and the lost focus event fires which updates the cell value fine. However on the last box i'm having issues because people dont press enter on the last field (which would commit the change) but press the commit button ive added to the toolbar (to send changes to server)- result - the changes they made in last column are not saved.

So, how to force the automatic commit when moving to another control? is there some way to keep track of the active cell

code sample:. Here i have a class "customeditor" . i check the data type and if its timestamp call a datepicker otherwise use a simple input box. As you can see in the handleChange event im correctly calling the this.props.onCommit event every time the value changes and it works as long as i move the focus out of the editor but as above, if i click another control outside the editor/data grid then the commit is no happenning. whats bizaare is if the say type "123" then three handleChange events are fired so at worse i would expect the underlying cell value to contain the first 2 key presses but no it still contains the original value. So is the commit only happening after lost focus.
Any help on which event i need to track/replicate to force the commit would be VERY helpful.

handleChange = (e) => {
    var type= this.state.cellType;
    console.log("editor type:" + type);
    if (type==="timestamp") {
        var conv = moment(e).format(CONSTS.DB2_TIMESTAMP);
        this.setState({dateTime: conv}, () => this.props.onCommit);
    } else {
        this.setState({stdText: e.target.value}, () => this.props.onCommit);
    }
    console.log(e);
};

dateEditor() {
    return (
        <>
        <DateTimePicker
            id="datetimepicker-1"
            value={this.fromTimestamp(this.state.dateTime)}
            onChange={this.handleChange}
            formatStyle="medium"
            // required
            // error="Date/time(stamp) is required"
            okLabel={"OK"}
            cancelLabel={"Cancel"}
        />
        </>
    );
};

standardEditor() {
    return (
        <input
            className="inputBox"
            id="simpedit-1"
            value={this.state.stdText}
            onChange={this.handleChange}
            >
        </input>
    );
};

[nstepien]

Could you try 7.0.0-canary.48? I've tweaked some internals in #2415, hopefully that should address it.

[nstepien]

I'd also suggest adding the autoFocus attribute on your input, + onBlur={() => props.onClose(true)} to automatically close and commit the editor when focusing away from it.

[peasonokay]

@nstepien Hi - i dont know how to download the "react-data-grid": "7.0.0-canary.48" version. Im getting
No matching version found for [email protected] - nb i am behind corp firewall and cannot download directly.

[nstepien]

Can you try npm install react-data-grid@latest?

[peasonokay]

Can you try npm install react-data-grid@latest?

wow thanks for the quick response!. worked.
Now all i need do is work out all the breaking changes from 6.0 to 7.0!

[nstepien]

Good luck!
We don't have proper API docs yet for v7, but we do ship with TS types, and we have examples there: https://adazzle.github.io/react-data-grid/canary/

[peasonokay]

Good luck!
We don't have proper API docs yet for v7, but we do ship with TS types, and we have examples there: https://adazzle.github.io/react-data-grid/canary/

Sorry to be a pain. So im trying to resolve the first issue now - namely using the new CellActionsFormatter
https://github.com/adazzle/react-data-grid/blob/main/stories/demos/components/Formatters/CellActionsFormatter.tsx

How do i import these into my project? I tried import ReactDataGrid, {CellActionsFormatter} from "react-data-grid";
returns:Attempted import error: 'CellActionsFormatter' is not exported from 'react-data-grid'.

[nstepien]

This is just an example formatter, we don't bundle it as part of the react-data-grid package.
You can just copy/paste the formatter, or implement your own.

[amanmahajan7]

Closing as the issue has been resolved. We can continue the discussion