Angular kendo grid datepicker closes immediately on inline row editing

I have problem with kendo grid inline row editing. Mat-datepicker closes immediately when I try to select another date(all the actions performed on mat-datepicker popup), its happening because of onDocumentClick event as provided in the reference link.

          <kendo-grid-column field="periodStartDate" title="Start Date">
              <ng-template
                kendoGridCellTemplate
                let-dataItem
                let-rowIndex="rowIndex"
                let-column="column"                
              >
              {{dataItem.periodStartDate | date: "MM/dd/yyyy"}}                
              </ng-template>
              <ng-template
                kendoGridFilterMenuTemplate
                let-filter
                let-column="column"
                let-filterService="filterService"
              >
                <date-range-filter
                  [field]="column.field"
                  [filter]="filter"
                  [filterService]="filterService"
                >
                </date-range-filter>
              </ng-template>
              <ng-template
                kendoGridEditTemplate
                let-column="column"
                let-formGroup="formGroup"
                let-isNew="isNew"
              >
              <mat-form-field appearance="fill">
                <input
                  matInput
                  (dateChange)="validateStartDate($event)"
                  [matDatepicker]="periodStartDateNew"
                  placeholder="Choose a date"
                  [formControl]="formGroup.get(column.field)"
                  kendoGridFocusable
                />
                <mat-datepicker-toggle
                  matSuffix
                  [for]="periodStartDateNew"
                ></mat-datepicker-toggle>
                <mat-datepicker #periodStartDateNew></mat-datepicker>
              </mat-form-field>
              </ng-template>
            </kendo-grid-column>```


reference : [enter link description here][1]


  [1]: https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-row-click/