Could you please provide us a runnable test case so we can debug it? and the support is also gonna be faster
Support Forum
I've checked your app and investigated the reason of such problem. I found that cell loose focus when we clicked in options list of Ant Select component, which rendered outside of cell element. Click outside of cell initiated finish editing before Ant Select triggered its change
event, and record won't be updated.
We need to fix this moment, I've opened a ticket for that https://github.com/bryntum/support/issues/5186
I tested with basic HTML combo as result of render()
method of React component, that works well. It also works with our build-in Combo as editor https://bryntum.com/docs/grid/api/Core/widget/Combo
As a workaround I would recommend you to apply styling to our combobox (it's pretty simple and configurable) and use it instead.
https://bryntum.com/docs/grid/guide/Grid/customization/styling
All the best,
Alex
Hi prashil,
Yes, it has been released.
As a fix, to avoid race condition problems here, we added a new parameter with an instance
of the component into editor method
editor: (ref, instance) => <DemoEditor instance={instance} ref={ref} />
And example how to use it into our demos. Please check
Grid/examples/frameworks/react/javascript/basic/src/components/DemoEditor.js
const editor = this.props.instance.features.cellEdit.editor;
const { record, dataField } = editor;
So you will need to update record
manually on the event/moment when your custom component will have these changes. This will apply changes even if cellEdit feature is already closed, as it happened when we use a custom component as cellEditor , which rendered outside of a cell DOM element (ant component combo list is one of such examples)
All the best,
Alex
import { Select } from "antd";
import "antd/dist/antd.css";
import React, { Component, Fragment } from "react";
const { Option } = Select;
export default class AntSelect extends Component {
state = { value: "" };
setValue(value) {
this.setState({ value });
}
getValue() {
return this.state.value;
}
isValid() {
return true;
}
focus() {}
onChangeHandler(value) {
this.setState({ value });
}
render() {
return (
<Select
value={this.state.value}
onChange={this.onChangeHandler.bind(this)}
>
<Option value="Alex">Alex</Option>
<Option value="Brat">Brat</Option>
<Option value="Coke">Coke</Option>
</Select>
);
}
}
How should I implement the code which is given by you to solve the focus problem on the above piece of code.
inside onChangeHandler
you need to get record and set a new value for record field. You can find complete example by the path I provided above.
onChangeHandler(value) {
const editor = this.props.instance.features.cellEdit.editor;
const { record, dataField } = editor;
record[dataField] = value;
}
Do not forget to pass instance into your component
editor: (ref, instance) => <DemoEditor instance={instance} ref={ref} />
All the best,
Alex