title: How to prevent event propagation for "Enter" key press in ag-grid-react cellEditor component?
body: <p>My question primarily revolves around <a href="https://www.ag-grid.com/javascript-grid-cell-editing/" rel="noreferrer">this statement</a> in the docs w.r.t. the react component:</p>
  <blockquote>
  <p><strong>cellEditor Params</strong></p>
  <p><strong>onKeyDown</strong> Callback to tell grid a key was pressed - useful to pass
  control key events (tab, arrows etc) back to grid - however you do not
  need to call this as the grid is already listening for the events as
  they propagate. This is only required if you are preventing event
  propagation.</p>
  </blockquote>
  <p>I understand that the cellEditor params exist as the props being passed to the react version of the component but I can't seem to find how to attach to <strong>onKeyDown</strong> as specified in the docs. In my constructor for my cellEditor the onKeyDown function exists and matches the <code>onKeyDown</code> specified in <code>cellEditorParams</code> inside my column definition (if it exists).</p>
  <pre><code>constructor(props) {
    super(props);
    // console.log(typeof props.onKeyDown == 'function') =&gt; 'true'
  }
  </code></pre>
  <p>But it's never reached if it simply exists in the component</p>
  <pre><code>onKeyDown(event) {
    console.log('not reached');
  }
  </code></pre>
  <p>It does get invoked if I put <code>onKeyDown={this.props.onKeyDown}</code> inside of a top level wrapping div around my input but it still doesn't catch the &quot;Enter&quot; press.</p>
  <p>I tried listening to the cell containing my custom cell editor</p>
  <pre><code>this.props.eGridCell.addEventListener('keyup', (event) =&gt; {
    console.log(event.keyCode === 13)
  })
  </code></pre>
  <p>Which <strong>does capture the enter press</strong> but it seems to unmount when enter is pressed before I can capture the final enter press inside the field? I've seen behavior where this doesn't work too so I'm very confused.</p>
  <p>I currently have a simple cell editor <em>MyCellEditor</em> that I am trying to make focus and select the next cell when enter is pressed in addition to just tab. I already have the ability to extract the <code>rowIndex</code> and <code>column</code> properties I need from the rowRenderer at <code>this.props.api.rowRenderer</code> which I then use like:</p>
  <p><code>this.props.api.rowRenderer.moveFocusToNextCell(rowIndex, column, false, false, true);</code></p>
  <p>My issue is where to prevent the event propagation by default from the &quot;Enter&quot; press.</p>
  <p>Below is my Cell Editor and the usage.</p>
  <pre><code>import React from 'react';
  import _ from 'lodash';
  
  class MyCellEditor extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        value: props.value,
      };
    }
  
    getValue() {
      return this.state.value;
    }
  
    isPopup() {
      return false;
    }
  
    isCancelBeforeStart() {
      return false;
    }
  
    afterGuiAttached() {
      const eInput = this.input;
      eInput.focus();
      eInput.select();
    }
  
    onKeyDown(event) {
      // Never invoked!
    }
  
    onChangeListener = (e) =&gt; {
      this.setState({ value: e.target.value });
    }
  
    render() {
      return (
        &lt;input
          ref={(c) =&gt; { this.input = c; }}
          className=&quot;ag-cell-edit-input&quot;
          type=&quot;text&quot;
          value={this.state.value}
          onChange={this.onChangeListener} /&gt;
      );
    }
  }
  export default MyCellEditor;
  </code></pre>
  <p>Column definition:</p>
  <pre><code>columnDefs = [{
      headerName: 'CustomColumn',
      field: 'customField',
      editable: true,
      cellClass: 'grid-align ag-grid-shop-order-text',
      sortable: false,
      cellEditorFramework: MyCellEditor,
      // Do I need cellEditorParams?
      cellEditorParams: {
        // onKeyDown: (event) =&gt; console.log('does not output')
      }
    },
    ...
  }
  </code></pre>
  <p>React:</p>
  <pre><code>&lt;AgGridReact
    columnDefs={columnDefs}
    rowData={this.props.rows}
    enableColResize=&quot;false&quot;
    rowSelection=&quot;single&quot;
    enableSorting=&quot;false&quot;
    singleClickEdit=&quot;true&quot;
    suppressMovableColumns=&quot;true&quot;
    rowHeight=&quot;30&quot;
    // onKeyDown also does nothing here
    onGridReady={this.onGridReady}
    onGridResize={() =&gt; console.log('grid resized')}
    onColumnResize={() =&gt; console.log('column resized')} /&gt;
  </code></pre>