While in add new Row mode, updateEditorValue does not propagate the value to the display

[KarthikHebbarMN]

Hey, I'm stuck in a similar #130 . Using updateEditorValue solves the issue of a new row being created below. But with custom editor and custom display cell case 'keyType': return <KeyTypeDisplay {...props} />; where the dataType is a type of DataType.Object.
after setting updateEditorValue, the Display component is receiving the 'value' as undefined. I think its because of 'rowKeyValue' being sent as 'undefined' in DisplayComponent but and empty object in editor.

Editor code:

const KeyTypeEditor = ({
    column, dispatch, rowKeyValue, value,
  }) => {
    const close = () => {
      dispatch(closeEditor(rowKeyValue, column.key));
    };
    const [editorValue, setValue] = useState(value);
    useEffect(() => {
      console.log("Editor value useeffrct");

    }, [editorValue]);
    return (
      <div>
        <select
          className='form-control'
          autoFocus={true}
          defaultValue={editorValue == null ? typeOfKeys[0] : editorValue.id}
          onBlur={() => {
            console.log("Editor", "column", column, "rowLeyValue", rowKeyValue, "value", editorValue);

            if (rowKeyValue == null || rowKeyValue == {}) {
              console.log("updating editor value");
              dispatch(updateEditorValue(rowKeyValue, column.key, editorValue));
            } else {
              console.log("updating cell value");
              dispatch(updateCellValue(rowKeyValue, column.key, editorValue));
            }
            close();
          }}
          onChange={(event) => {
            const id = event.target.value;
            console.log("editor id", id);
            const keyValue = typeOfKeys.find(x => x.id == id);
            console.log("Editor value set", keyValue);
            setValue(keyValue);
          }}>
          {typeOfKeys.map((key) => {
            return (<option value={key.id}>{key.type}</option>);
          })}
        </select>
      </div >
    );
  };

Display Component Code:

 const KeyTypeDisplay = ({
    column,
    rowKeyValue,
    value,
  }) => {
    console.log("Displayer", "column", column, "rowLeyValue", rowKeyValue, "value", value);
    console.log("dataArray 1", dataArray);
    const table = useTableInstance();
    return (
      <div onClick={() => {
        table.openEditor(rowKeyValue, column.key);
      }} >
        {value == null ? " " : value.type}
      </div>
    );
  };

Thanks

[KarthikHebbarMN]

Hey, as pointed out
I am sharing the example here in on stackblitz

https://stackblitz.com/edit/stackblitz-starters-5kupdp?file=src%2FApp.js

[Alexander Komarov]

Hi @KarthikHebbarMN there is a working example https://stackblitz.com/edit/stackblitz-starters-zszyaf?file=src%2Findex.js,src%2FApp.js please take attention to newRowId

[KarthikHebbarMN]

Works, Thanks :)