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-datepicker> - size property is not respected #17302

Open
1 of 4 tasks
ChrisRitchie opened this issue Jan 6, 2025 · 1 comment
Open
1 of 4 tasks

<p-datepicker> - size property is not respected #17302

ChrisRitchie opened this issue Jan 6, 2025 · 1 comment
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team
Milestone

Comments

@ChrisRitchie
Copy link

ChrisRitchie commented Jan 6, 2025

Describe the bug

Setting the size property on does not change the input size. Upon setting size="small" I would expect that the p-inputtext-sm class is added to the input element, which is doesn't.

Docs:
https://primeng.org/datepicker#sizes

p-inputtext-sm can also not be added to the inputStyleClass either as a work around. This particular class is striped out when added to inputStyleClass.
https://primeng.org/datepicker#api.datepicker.props.inputStyleClass

This stripping out of entered inputStyleClass and styleClass has happened since v18 and continues in v19 on multiple components where the size property has been introduced:

  • p-datatable-sm ignored in styleClass on p-table
  • p-inputtext-sm ignored in inputStyleClass on p-autoComplete

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

Happy to help and provide a PR with some guidance.

Reproducer

https://stackblitz.com/edit/github-ktsfpzqr

Environment

Mac Silicon (M1)
Node 18.20.3
Angular: 19.0.2
PrimeNG: 19.0.2

Angular version

19.0.2

PrimeNG version

v19

Node version

18.20.3

Browser(s)

Firefox 133.0.3 (aarch64)

Steps to reproduce the behavior

  1. Create p-datepicker component in your html
  2. Add size="small" as per the documentation (https://primeng.org/datepicker#sizes)
  3. Run the application and notice the input size is normal, and no p-inputtext-sm class name has been added to the input
  4. Add size="large" as per the documentation, again the input size is normal. No p-inputtext-lg class has been added to the input

Secondly when adding p-inputtext-sm as to inputStyleClass within p-datepicker it is ignored meaning a workaround can not take place.
5. add the following as an attribute of p-datepicker inputStyleClass="p-inputtext-sm"
6. Run the application and inspect the input
7. The class p-inputtext-sm should be added to the input but has been ignored.
NB: any other value added as inputStyleClass does get added, but p-inputtext-sm is ignored presumably because of the size attribute additions with v18.

I don't believe we should be stripping out values from either inputStyleClass and styleClass from any components. We should respect all inputStyleClass and styleClass entered by the user.

Expected behavior

  1. Add size="small" to p-datepicker results in the addition of p-inputtext-sm class name to the input element
  2. Add size="large" to p-datepicker results in the addition of p-inputtext-lg class name to the input element
  3. Add inputStyleClass="p-inputtext-sm" to p-datepicker results in the addition of p-inputtext-sm class name to the input element
  4. Add inputStyleClass="p-inputtext-lg" to p-datepicker results in the addition of p-inputtext-lg class name to the input element
@ChrisRitchie ChrisRitchie added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jan 6, 2025
@ChrisRitchie ChrisRitchie changed the title Autocomplete - inputStyleClass does not get added to input class element <p-datepicker> - size property is not respected Jan 6, 2025
@imaksp
Copy link
Contributor

imaksp commented Jan 7, 2025

duplicate of #17253

@mertsincan mertsincan added this to the 19.1.0 milestone Jan 16, 2025
@github-project-automation github-project-automation bot moved this to Review in PrimeNG Jan 16, 2025
@mertsincan mertsincan added Status: Pending Review Issue or pull request is being reviewed by Core Team and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jan 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team
Projects
Status: Review
Development

No branches or pull requests

3 participants