Angular ComboBox with autofill and data-lpignore

[Walter Cook]

I need to autofill for the combobox but I want to ignore LastPass. 

<ejs-combobox id="source" [dataSource]='sources'

[autofill]='true'

(data-lpignore)='true'

I've tried every permutation and I still get the LastPass icon.

data-lpignore="true"

[data-lpignore]="true"

(data-lpignore)="true"

data-lpignore='true'

(data-lpignore)='true'

[data-lpignore]='true'

Any ideas?

Thanks

[Berly Christopher]

Hi Walter,

Greetings from Syncfusion support.

By default, the ComboBox component will have the autocomplete property as off which is leads to prevent the autofill of saved data in the browser. Also, we suggest you to ignore the autofill data by ignore the suggestion with help of htmlAttributes property as mentioned in the below code example.

API Link: https://ej2.syncfusion.com/angular/documentation/api/combo-box#htmlattributes

     <ejs-combobox formControlName="skillname" name="skillname" [autofill]='true'

                        [dataSource]='autoreactiveskillset' [htmlAttributes]="htmlAttributes"

                        [placeholder]='autoreactiveplaceholder' floatLabelType='Auto'>

                    </ejs-combobox>

 public htmlAttributes = { 'data-lpignore': 'on' };

Still issue persists, please share the issue reproducing sample or video by covering code snippet along with replication procedure that will help us to check and proceed further from our end.

Regards,

Berly B.C

[Walter Cook]

Sadly it doesn't always work.

<!--Has LP -->

<ejs-combobox id="commonTask" [dataSource]='commonTasks' 

                 [htmlAttributes]="htmlAttributes"

                [placeholder]="commonTasksText" [fields]='commonTasksFields'class="form-control" formControlName="commonTask"

                ></ejs-combobox>

<!--Has LP -->

<ejs-combobox id="source" [dataSource]='sources'

            [autofill]='true'

            [htmlAttributes]="htmlAttributes"

            [placeholder]="sourceText" [fields]='sourceFields'class="form-control" formControlName="source"

            ></ejs-combobox>

<!--does not have LP -->

 <ejs-combobox id="completedBy" [dataSource]='completedByData'

                [autofill]='true'

                [htmlAttributes]="htmlAttributes"

                [placeholder]="completedByText" class="form-control" formControlName="completedBy"

                ></ejs-combobox>

.ts

export class TasksToTicketAddComponent implements OnInit {

  public htmlAttributes = { 'data-lpignore': 'on' };

I'd thought MAYBE it was because it was bound to an array getting populated from external data. But setting it to a local array made no difference.
Any other ideas?

Attachment: 3_combos_2_with_LP_76f287af.zip

[Berly Christopher]

Hi Walter, 

  

Based on the shared information, we will validate the issue and update the further details in two business (9^th July 2021). We appreciate your patience until then. 

  

Regards, 

Berly B.C 

[Berly Christopher]

Hi Walter, 

  

Thanks for the patience. 

  

We can achieve the requested requirement by adding the data-lpignore as true in the ngAfterViewInit life cycle as mentioned in the below code example. 

  

 ngAfterViewInit() { 

    (this.comboObj as any).inputElement.setAttribute('data-lpignore', true); 

  } 

 

  

Modified sample: https://stackblitz.com/edit/angular-s1rpbj?file=app.component.ts  

  

Regards, 

Berly B.C 

[Walter Cook]

Well this mostly works and I appreciate your efforts.

A couple of wrinkles:
- I have one inside a hidden div:

<div *ngIf="commonTasks">

my combobox here

</div>

So it can't/won't apply the above code. If I remove the div, it works.

- even in your stackblitz, I get an LP icon.

I'm going to have to come up with some workaround.

Man, 20 components impacted. Ugh.

Cheers

Attachment: StackBlitzLastPass_f734a258.zip

[Walter Cook]

And sometimes it won't implement at all.

html:

 <ejs-combobox #timelyCombo id="newtimely" [dataSource]='feedbackData' ...

.ts:

import { ComboBoxComponent } from '@syncfusion/ej2-angular-dropdowns';

export class FeedbackCollectComponent implements OnInit {

  @ViewChild('timelyCombo') timelyCombo: ComboBoxComponent;

 ngAfterViewInit() {

        (this.timelyCombo as any).inputElement.setAttribute('data-lpignore', true);

this line kicks this errors

TypeError: Cannot read property 'inputElement' of undefined

    at FeedbackCollectComponent

[Ponmani Murugaiyan]

Hi Walter, 

Thanks for the update. 

Currently we are checking the reported query. We will update further details in 2 business days (July 14, 2021). We appreciate your patience until then. 

Regards, 

Ponmani M 

[Berly Christopher]

Hi Walter, 

  

Thanks for the patience. 

  

We have checked the reported issue. If you are rendering the ComboBox component in hidden element, the combobox instances will be undefined in the ngAfterViewInit life cycle. Due to this, the reported console error is occurred. So, we suggest you to add this attribute in the created event of the corresponding combobox component. Kindly refer the below code example. 

  

  ngAfterViewInit() { 

    this.commonTasks = true; 

    this.cdRef.detectChanges(); 

  } 

  OnCreate(args) { 

    setTimeout(() => { 

      (this.comboObj as any).inputElement.setAttribute('data-lpignore', true); 

    }); 

  } 

 

  

Modified sample: https://stackblitz.com/edit/angular-s1rpbj-zjmmvp?file=app.component.html 

  

Regards, 

Berly B.C 

[Walter Cook]

Well, the couple places I've put that code, it's worked!

Thank you for the extend

[Berly Christopher]

Hi Walter, 

  

Most welcome. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C