DatePicker doesn't work when stopEditingWhenGridLosesFocus option is true

Question

In this example clicking on a date it is possible to edit it, but if you use the option "stopEditingWhenGridLosesFocus", the date picker doesn't work anymore. Is it possible to fix this?

<AgGridReact
   stopEditingWhenGridLosesFocus // without this line works fine
   columnDefs={this.state.columnDefs}
   components={this.state.components}
   onGridReady={this.onGridReady.bind(this)}
   rowData={this.state.rowData}
 />

Answer 1

Having "stopEditingWhenGridLosesFocus" set to true, when you click on a date, the input tag is gone, so the reference for your datepicker gets lost.

I had the same issue and I solved it doing this:

• Change your custom component settings to work in a popup:

  Datepicker.prototype.isPopup = function() {
      return true;
  };
  

• Then, call to stopEditing() method on select event in your datepicker:

  $(this.eInput).datepicker({
      dateFormat: 'dd/mm/yy',
      onSelect: function(dateText, inst) {
          params.stopEditing();
      }
  });
  

I have created a new working fork from your example here