Clicking on Auto file column clearing the data. Works fine when tab out.

[gowthamKs]

Hi,

Am using the Ag-grid-autocomplete.

I have set the strict to false to allow both autofill and manual free text. This works fine.

After selecting the value, if I edit the autofill data column value and click on other column the auto fill value disappears. However when we tab out from autofill cell it works. Could you please help me in this ?

1. Auto Fill data added:
   

2. Click Autofill column try editing:
   

3. Now click on next column the autofill value clears. Howevere this works fine if I do tab out from auto fill column.
   

Also can you provide some example on how to use "onFreeTextSelect" in auto fill.

[hbthanki]

Try valueFormatter like this
#49 (comment)

[gowthamKs]

Thanks hbthanki.

using valueFormatter am able to solve for one scenario.

Started working:

1. Auto fill value selected from the dropdown. In this case am able to get back the value from valueFormatter.

valueFormatter: (params) => {
              if (params.value) {
                  return params.value.label || params.value.value || params.value;
              }
              if(params.data)
                return params.data.Operation_Value;

              return "";
          }, 

Not working: I have set the strict to false, able to accept the free text. After adding free text click on other column, the auto fill column value disappears.

1. Free text vale added:
   

2. Click on other column
   

Note: Same scenario works fine if I do tab out.

Below is my full code:

{
          headerName: "Raw Material",
          field: "Operation_Name",
          cellEditor: AutocompleteSelectCellEditor,
          cellEditorParams: {
              autocomplete: {
                  input: document.getElementById("Operation_Name"),
                  fetch: (cellEditor, text, update) => {
                        let match = text.toLowerCase() || cellEditor.eInput.value.toLowerCase();
                        if(match && match.length > 2)
                        {
                          
                          let xmlHttp = new XMLHttpRequest();
                          xmlHttp.onreadystatechange = () => {
                              if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
                                  let data = JSON.parse(xmlHttp.responseText);
                                  let items:any[] = data.map(d => ({ value: d.Operation_Name, label: d.Operation_Name, unitcost: d.UnitCost, quantity: d.Quantity, Operation_Value:d.Operation_Value }));
                                  update(items);
                                }

                                if (xmlHttp.status === 404) {
                                    update(false);
                                }
                          };
                          let url: string = environment.API_BASE_URL + '/EditDisplay/PopulateRawMaterials/' + match;
                          xmlHttp.open("GET", url, true);
                          xmlHttp.send(null);
                        }
                  },
                  strict: false,
                  autoselectfirst: false,               
              },
              placeholder: 'Select a Raw material',
          },
          valueFormatter: (params) => {
              if (params.value) {
                  return params.value.label || params.value.value || params.value;
              }
              if(params.data)
                return params.data.Operation_Value;

              return "";
          },
          editable: true,

        },

[gowthamKs]

Am able to solve the issue by updating the cellEditor.currentItem value.

fetch: (cellEditor, text, update) => {
                        let match = text.toLowerCase() || cellEditor.eInput.value.toLowerCase();
                        
                        if(match && match.length > 2)
                        {
                          
                          let xmlHttp = new XMLHttpRequest();
                          xmlHttp.onreadystatechange = () => {
                              if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
                                  let data = JSON.parse(xmlHttp.responseText);
                                  let items:any[] = data.map(d => ({ value: d.Operation_Name, label: d.Operation_Name, unitcost: d.UnitCost, quantity: d.Quantity, Operation_Value:d.Operation_Value }));
                                  if(items.length == 0){
                                    cellEditor.currentItem = match;
                                  }
                                  update(items);
                                }

                                if (xmlHttp.status === 404) {
                                    update(false);
                                }
                          };
                          let url: string = environment.API_BASE_URL + '/EditDisplay/PopulateRawMaterials/' + match;
                          xmlHttp.open("GET", url, true);
                          xmlHttp.send(null);
                        }
                  }