p-inputNumber: CSS regression when upgrading to 16.4.1

[psarno]

Describe the bug

When we implement a <p-inputNumber> component with [showButtons]="true", the buttons are too tall push into each other.

  <p-inputNumber
    [(ngModel)]="model.someProperty"
    [showButtons]="true" />

It now renders like this:

With [showButtons]="false" it looks normal:

No styles outside of the base PrimeNG CSS are being applied to this element. It renders incorrectly in all themes, implicating the base styling for this component with the buttons. It renders incorrectly on every screen in the system, which is going to cause us to have to rollback to 16.3.1, where it renders properly.

I can not create a repro as, even with the updated repro template, it does not load in StackBlitz:

Environment

"primeflex": "2.0.0",
"primeicons": "^6.0.1",
"primeng": "~16.4.1",

Angular 16.2.2

Reproducer

No response

Angular version

16.2.2

PrimeNG version

16.4.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.0

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[ashikjs]

@psarno I can not reproduce so can you check it.

https://stackblitz.com/edit/z55cu4?file=src%2Fapp%2Fdemo%2Finput-number-reactive-forms-demo.html

[SoyDiego]

@psarno I can not reproduce so can you check it.

https://stackblitz.com/edit/z55cu4?file=src%2Fapp%2Fdemo%2Finput-number-reactive-forms-demo.html

I can see your example perfectly @ashikjs

[ashikjs]

PrimeNG: 16.3.1 =>

and after update to PrimeNG: 16.4.1

I can see same UI so I can not generate ant broken view or UI.

[psarno]

@ashikjs @SoyDiego I have finally reproduced this with a minimal test case of:

<p-inputNumber
[showButtons]="true"
></p-inputNumber>

You can see this here:

https://stackblitz.com/edit/z55cu4-fjv5hg

This may be the fact we are using PrimeFlex 2.0.0 and not 3.3.0 as you are?

To reproduce this, I updated package.json and changed primeflex to 2.0.0, and then changed angular.json to reflect how we bring in the styles:

            "styles": [
              "src/styles.scss",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeflex/primeflex.css"
            ],

This is enough to reproduce what we are seeing.

Update: I ran the automatic conversion tool for PrimeFlex 2 -> 3 on our project and updated our reference to 3.3.0.

Even with the PrimeFlex update, the project is still rendering incorrectly. Something else is going on.

If I force the height to 19.6 just as an experiment, the height of the input element is correct now but the buttons are overlapping it:

[ashikjs]

@ashikjs After check your slackbizz i see your code have a theme file which one calling cdn if we remove this one then it working fine.

also you can check it, https://github.com/orgs/primefaces/discussions/130

[psarno]

@ashikjs That seems to have been the case. I was assuming the CDN theme matched with the PrimeNG release due to the version number but it seems that was not the case.

I am bringing these in locally now (what is shipped with the package by PrimeNG). This has resolved any theming issues when moving from 16.3.1 to 16.4.1.

Thanks!