Using display: inline-block might help.

.noclick {    
     cursor: default;
     pointer-events: none;
     display: inline-block;
}

Please use this if this help

1. Don’t use pointer-events css as this will only stop click events for element in which you have applied it but parent propagation is not stopped by it for this you need to prevent parent’s click as well

2. Use Directive instead to prevent click event and parent propogation as well

Have a look at this link:

https://stackblitz.com/edit/primeng-autocomplete-23yqee

For more information on pointer-events read this:

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Hi I have a probleme with style and I can’t understand how to fix it. Style pointer-events: none doesn’t work.

This is example of my code:

Style:

.noclick {    
     cursor: default;
     pointer-events: none;
}

And my html:

<p-autoComplete
[(ngModel)]="searchModel"
[suggestions]="items"
[maxlength]="1024"
(completeMethod)="search($event.query)"
[placeholder]=""
(onSelect)="select($event)"
[emptyMessage]="'Nothing'"
(onBlur)="clear()"
(onFocus)="open()"
[disabled]="disabled"
#autocompletePanel
[ngClass]="{'search-icon': searchIcon}"
[delay]="0"
>
    <ng-template let-searchModel pTemplate="item">
        <div class="ui-helper-clearfix">
            <span *ngIf="searchModel.title" class="noclick">{{ searchModel.title }}</span>
            <span *ngIf="!searchModel.title">{{ searchModel.shortName || searchModel.fullName }}</span>
        </div>
    </ng-template>
</p-autoComplete>