title: Getting input value from custom autocomplete cell editor
body: <p>I'm trying to make a custom autocomplete component with ag grid.
  I can't update the returned value with the selected value from the dropdown</p>
  <p>In other words :</p>
  <p>I type 'A' =&gt; I get a list of items =&gt; I choose one =&gt; the input is updated with the item value =&gt; save =&gt; I'm getting 'A'</p>
  <p>cellEditorSelector :</p>
  <pre><code>    cellEditorSelector: (params) =&gt; {
        const values = this.articles.map((item) =&gt; {
          return {
            text: item.code,
            value: item.id,
          };
        });
        return {
          component: 'autoComplete',
          params: {
            values,
          },
        };
      },
  </code></pre>
  <p>The custom component :</p>
  <pre><code>  selector: 's1-ag-grid-auto-complete',
    template: `&lt;div class=&quot;flex flex-col gap-1&quot;&gt;
      &lt;div class=&quot;relative&quot;&gt;
        &lt;input
          #input
          class=&quot;w-full text-xs rounded-md border-gray-300 shadow-sm pr-6&quot;
          matInput
          (input)=&quot;onInputChange($event)&quot;
          (change)=&quot;onChange($event)&quot;
          [matAutocomplete]=&quot;auto&quot;
          [value]=&quot;value&quot;
          s1AutocompleteForceSelection
          type=&quot;text&quot;
        /&gt;
      &lt;/div&gt;
      &lt;mat-autocomplete autoActiveFirstOption=&quot;true&quot; #auto=&quot;matAutocomplete&quot;&gt;
        &lt;mat-divider&gt;&lt;/mat-divider&gt;
        &lt;mat-option *ngFor=&quot;let option of filteredList&quot; [value]=&quot;option.value&quot;&gt;
          &lt;ng-container&gt;
            &lt;ng-container&gt;&lt;/ng-container&gt;
          &lt;/ng-container&gt;
          &lt;span [title]=&quot;option.text&quot; class=&quot;text-xs break-words&quot;&gt;{{ option.text }} &lt;/span&gt;
        &lt;/mat-option&gt;
      &lt;/mat-autocomplete&gt;
    &lt;/div&gt;`,
  })
  export class AgGridAutoCompleteComponent implements ICellEditorAngularComp {
    public value: any;
    public filteredList;
    public options;
    private params: any;
  
    public agInit(params: any): void {
      this.params = params;
      this.value = params.value;
      this.options = params.values;
    }
  
    public onInputChange(event: Event): void {
      const inputValue = (event.target as HTMLInputElement).value;
      if (inputValue != null &amp;&amp; inputValue != '') {
        const inputValueLowerCase = inputValue.toLowerCase();
        this.filteredList = (this.options || []).filter((element) =&gt; {
          return element.text.toLowerCase().includes(inputValueLowerCase);
        });
      } else {
        this.filteredList = [];
      }
    }
  
    public onChange($event) {
      this.value = $event.target.value;
    }
  
    public getValue(): any {
      return this.value;
    }
  }
  </code></pre>
  <p>Any ideas?</p>