Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

p-autoComplete not applying p-filled class like other inputs #14088

Closed
tsteuwer-accesso opened this issue Nov 10, 2023 · 1 comment
Closed

p-autoComplete not applying p-filled class like other inputs #14088

tsteuwer-accesso opened this issue Nov 10, 2023 · 1 comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@tsteuwer-accesso
Copy link

Describe the bug

When an input has text in all situations, a p-filled class is added to indicate there is text. For the p-autoComplete component, the input does not get this class when an item is clicked and the input is assigned the value.

This causes styling of filled inputs to be mismatched when near an autocomplete component.

image

Environment

Angular CLI: 17.0.0
Node: 18.16.0
Package Manager: npm 9.5.1
OS: linux x64

Angular: 17.0.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.0
@angular-devkit/build-angular   17.0.0
@angular-devkit/core            17.0.0
@angular-devkit/schematics      17.0.0
@angular/cli                    17.0.0
@angular/ssr                    17.0.0
@schematics/angular             17.0.0
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Reproducer

https://stackblitz.com/edit/github-8bibwt?file=src%2Fapp%2Fapp.component.ts

Angular version

17.0.0

PrimeNG version

16.7.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.0

Browser(s)

Chrome

Steps to reproduce the behavior

In the above stackblitz, in style.css I've added a border of purple to any filled input.
Type in auto complete and select an item. Notice no purple border.
Type in the text field. Notice it has a purple border.
Type in the textarea field. Notice it has a purple border.

Expected behavior

The p-filled class is added so it can be consistent with other inputs.

@tsteuwer-accesso tsteuwer-accesso added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Nov 10, 2023
@tsteuwer-accesso
Copy link
Author

I noticed there is actually a p-inputwrapper-filled instead on a parent element.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

1 participant