p-inputNumber inside p-inputGroup : remove border-radius

[aalleard]

Describe the bug

Hello,

When I use a p-inputNumber inside a p-inputGroup, there is a border-radius on the same side as the addon

Is it possible to remove border-radius on addon sides?

Environment

DEV environment, see details about version below

Reproducer

No response

Angular version

17.0.9

PrimeNG version

17.3.2

Build / Runtime

TypeScript

Language

TypeScript

Node version (for AoT issues node --version)

18.16.1

Browser(s)

No response

Steps to reproduce the behavior

        <div class="flex align-items-center">
            <div class="col-4">
                <label>Taux d'assurance</label>
            </div>
            <p-inputGroup class="col-8">
                <p-inputNumber formControlName="insuranceRate" mode="decimal" [minFractionDigits]="0"
                    [maxFractionDigits]="2"></p-inputNumber>
                <p-inputGroupAddon>%</p-inputGroupAddon>
            </p-inputGroup>
        </div>

Expected behavior

I want border-top-right-radius and border-bottom-right-radius to be 0.

Problem is I think that input being wrapper in p-inputNumber, is detected as last-child, but shouldn't

[davidediak]

yep, that's annoying: does anyone have a workaround?

[PierreB40]

@davidediak Not the best solution but while waiting for a fix I overload the input style with the inputStyleClass parameter Example for group with right addon using tailwind: <p-inputNumber [inputStyleClass]="'!rounded-none !rounded-l-[--border-radius] !border-r-0'" />

• Reset rounded corners
• Add rounded left corners with css variable --border-radius
• Remove right border which is already put on addon