ejs-dropdownlist shows autocomplete when allowFiltering is true

[Michael Mairegger]

If I have the following control inside a <div [formGroup]="editForm"> then when clicking into the control shows the autocomplete popup

<ejs-dropdownlist [dataSource]="addressDataManager" [query]="addressQuery" [allowFiltering]="true" formControlName="AddressId" floatLabelType="Auto" placeholder="Rechnungsadresse" [fields]="dropDownAddressFields"></ejs-dropdownlist>

I have tried to set a [htmlAttributes]="{'autocomplete': 'off'}" but this does not work either

How can I disable this behavior?

[Berly Christopher]

Hi Michael, 

  

Greetings from Syncfusion support. 

  

We have checked the reported issue. We suspect that the issue may be caused due to not updating the autocomplete attribute in the component properly. So, we suggest you to adding the autocomplete as off in the ngAfterViewInit life cycle as mentioned in the below code example.  

  

 (this.listObj as any).inputElement.setAttribute('autocomplete', 'off'); 

 

 

  

Sample Link: https://stackblitz.com/edit/angular-aacusk?file=app.component.ts 

  

Screenshot: 

  

 

  

Regards, 

Berly B.C 

[Michael Mairegger]

Hi thank you for the response. I have some issues following the suggestion, since I am using this control within the #editSettingsTemplate:

<ng-template #editSettingsTemplate let-data>
  <div style="width: 150em">
    <div [formGroup]="editForm">
      ...
      <ejs-dropdownlist [dataSource]="addressDataManager" [query]="addressQuery" [allowFiltering]="true"  formControlName="AddressId" floatLabelType="Auto" placeholder="Rechnungsadresse" [fields]="dropDownAddressFields"></ejs-dropdownlist>
      ...
    </div>
  </div>
</ng-template>

actionBegin(args: SaveEventArgs): void {
  if (args.requestType === 'beginEdit' || args.requestType === 'add') {
    this.editForm = this.createFormGroup(args.rowData);
  }
  ...
}

[Berly Christopher]

Hi Michael,  

 

You can set the autocomplete attribute to the DropDownList component filter input element inside the ‘created’ event. Please refer to the below code example and documentation and sample link for more information.  

 

[html]  

<ng-template #editSettingsTemplate let-data>  

      <div ngForm #orderForm="ngForm">  

        <table class="e-table e-inline-edit" cellspacing="0.25">  

             .   .  .  

              <td class="e-rowcell">  

                <ejs-dropdownlist  id="ShipCountry" (created)="created($event)"  name="ShipCountry"   [(ngModel)]="orderData.ShipCountry"  [dataSource]="shipCountryDistinctData"   allowFiltering="true"  

                  [fields]="{ text: 'ShipCountry', value: 'ShipCountry' }"   popupHeight="300px"                 floatLabelType="Never" ></ejs-dropdownlist>  

              </td>  

            </tr>  

          </tbody>  

        </table>  

      </div>  

    </ng-template>  

 

[component.ts]  

export class AppComponent {  

 

  public created(args: any): void {  

    (this.grid.element.querySelector('#ShipCountry') as EJ2Intance).ej2_instances[0].inputElement.setAttribute('autocomplete', 'off');  

  }  

}  

 

Documentation : https://ej2.syncfusion.com/documentation/api/drop-down-list#created  

 

Sample               : https://stackblitz.com/edit/angular-j4pkxe?file=app.component.ts  

 

Please get back to us if you have any queries.  

 

Regards,  

Berly B C