Bryntum Support Forums

Could you please provide us a runnable test case so we can debug it? and the support is also gonna be faster

Added.

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

We were testing all the features of bryntum grid but since this issue has not been resolved we are unable to move ahead with using your grid.Can you please tell me when this issue will get resolved ?

We've increased a priority for that ticket, and set 5.2.x milestone. So it will be in one of 5.2.x patch releases. We cannot provide dates unfortunately. Very raw estimation is 1 - 4 weeks.

Hi team,
Is this issue with ticket #5186 is fixed and released ?

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)

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} />