Component: Autocomplete

[fensefernando]

Describe the bug

On textbox from autocomplete component, show it [object Object]

Environment

Reproducer

No response

Angular version

17.0.6

PrimeNG version

17.0.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.10.0

Browser(s)

Chrome

Steps to reproduce the behavior

No response

Expected behavior

No response

[cetincakiroglu]

Hi,

Could you please share a stackblitz reproducer so we can identify the issue?

[fensefernando]

I don't know, but i use apollo-16. Could be that issue born there

[cetincakiroglu]

Could you please share some code?

[fensefernando]

package.json

"dependencies": {
    "@angular/animations": "^17.0.6",
    "@angular/cdk": "^17.0.3",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/forms": "^17.0.0",
    "@angular/material": "^17.0.3",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/router": "^17.0.0",
    "@fortawesome/fontawesome-free": "^6.5.1",
    "@ngx-loading-bar/core": "^6.0.2",
    "@ngx-loading-bar/http-client": "^6.0.2",
    "@ngx-loading-bar/router": "^6.0.2",
    "hammerjs": "^2.0.8",
    "highcharts-angular": "^4.0.0",
    "ngx-device-detector": "^7.0.0",
    "primeflex": "^3.3.1",
    "primeicons": "^6.0.1",
    "primeng": "^17.0.0",
    "rxjs": "~7.8.0",
    "sweetalert2": "^11.10.1",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
},

component.html

                    <p-autoComplete name="articulo" [(ngModel)]="articuloViewSearch"
                        [suggestions]="articuloViewSearchList" (completeMethod)="filterArticuloView($event)"
                        [size]="80" [minLength]="1" placeholder="Buscar" field="artReferencia"
                        [ngClass]="{'p-invalid': f.submitted }" [disabled]="saveDisabled!"
                        [inputStyle]="{'width':'100%'}" (onSelect)="selectArticuloView()"
                        (onKeyUp)="onKeyDownArticulo($event)">
                        <ng-template let-articuloView pTemplate="item">
                            <div class="p-helper-clearfix">
                                <span style="float:left;">{{articuloView.artReferencia}}</span>
                                <span style="float:right;">{{articuloView.artNombre}}</span>
                            </div>
                        </ng-template>
                    </p-autoComplete>

component.ts

//Declaracion
articuloViewSearch: any = {};
articuloViewSearchList: any[] = [];

//methods
filterArticuloView(event: any) {
this.articuloView.search = event.query;
this.inventarioService.readArticuloViewAutocompleteVenta(this.articuloView).subscribe({
next: (data) => {
this.articuloViewSearchList = data;
},
error: (error) => {
this.messageUtil.showError(error);
}
});
}

selectArticuloView() {
    this.searchArticulo = '';
    if (this.clienteView.cliTipoCliente) {
        if (this.clienteView.cliTipoCliente === 'l4') {
            this.modificarPrecio = this.articuloViewSearch.artModificarL4;
            this.precio = this.articuloViewSearch.artPrecioL4;
        } else if (this.clienteView.cliTipoCliente === 'l3') {
            this.modificarPrecio = this.articuloViewSearch.artModificarL3;
            this.precio = this.articuloViewSearch.artPrecioL3;
        } else if (this.clienteView.cliTipoCliente === 'l2') {
            this.modificarPrecio = this.articuloViewSearch.artModificarL2;
            this.precio = this.articuloViewSearch.artPrecioL2;
        } else if (this.clienteView.cliTipoCliente === 'l1') {
            this.modificarPrecio = this.articuloViewSearch.artModificarL1;
            this.precio = this.articuloViewSearch.artPrecioL1;
        }
    } else {
        this.modificarPrecio = this.articuloViewSearch.artModificarL1;
        this.precio = this.articuloViewSearch.artPrecioL1;
    }
    this.nameArticulo = this.articuloViewSearch.artNombre;
}

``

[rekna1]

I have the same issue after upgrading from v16 to v17...

<p-autocomple [(ngModel)]="vm.dto" field="Description" ...

vm.dto.Description = null

In previous version this showed an empty input

[cetincakiroglu]

Apollo 16 is compatible with PrimeNG 16 and Angular 16. Probably the issue is related with version mismatch. You can download the v17 of the apollo from the store. Closing the issue since it's fixed in the v17, please re-open the issue if it persists.

[rekna1]

I still have this issue with version 17 of primeng:

[rekna1]

still having this issue with 17.6

[naveedpaen]

still getting issue in 17.12.0

[I-m-Zee]

I'm getting the same issue on Version 17.12.0

[RezaMakvandi]

I'm sorry for those who broke all autocomplete functionalities. keyboard arrowdown doesn't open the dropdown, an empty object can not be passed to ngmodel as initial value, changed the style classes. what else?????????