Using Material Autocomplete for inline editing with ag-grid

Question

I am facing issues while trying to use angular-material Autocomplete for doing inline edit.

Created plunk for the same: Material Autocomplete for Inline Edit - ag-grid

1. Autocomplete options are not coming at the expected position. I have to scroll down below the bottom of the grid to see the options.
2. Once I select any option, I am not able to see the updated value in the row - I just see blank value instead.

Tried providing various values for isPopup?(): boolean { return false; } for #1 and getValue() { return this.selectedValue; } for #2, but not getting any clue what's the actual issue is.

What I want is,

1. The options to get displayed at proper position - like what we see while using normal material autocomplete
2. The options to get displayed as soon as I open the cell for editing - as of now, I have to click inside the editing cell.
3. Once I am done with selecting appropriate value, it should also be updated in the grid.

Answer 1

The first case could be solved via overriding .cdk-overlay-pane, just add styles block to your AutocompleteEditor component

styles: [`
    ::ng-deep .cdk-overlay-pane {
        /* Do you changes here */
        position: fixed; // <- only this one is crucial
        z-index: 1000;
        background:white
    }
`],

Partially got answer from here

The second, you have to take care of focus by your self, so the easiest way to create another ViewChild reference and add it to material input as example #cInput

@ViewChild('cInput') public cInput;
afterGuiAttached?(): void {
    this.cInput.nativeElement.focus();
}

The third case, use option instead of value inside _autoCompleteChanged function

_autoCompleteChanged(option) {
  this.selectedValue = option; 
}