Password: The element appears broken when toggleMask is activated and contained inside a "p-inputgroup" div element

[meinhundgojko]

Describe the bug

I have found a visual bug when using a Password component with toggleMask activated, and this element is contained inside a "p-inputgroup" div. I'm using slightly modified code from these examples: PrimeReact InputGroup. When using PrimeReact version 10.6.3 or newer, the Password component appears broken.

With version 10.6.2 or older, everything looks OK.

Reproducer

https://stackblitz.com/edit/stackblitz-starters-2j1uag

PrimeReact version

10.6.6

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

Use Primereact 10.6.3+ with this source code:

  <div>
    <div className="p-inputgroup flex-1">
      <span className="p-inputgroup-addon">
        <i className="pi pi-user"></i>
      </span>
      <InputText placeholder="Username" />
    </div>

    <div className="p-inputgroup flex-1">
      <span className="p-inputgroup-addon">$</span>
      <InputNumber placeholder="Price" />
      <span className="p-inputgroup-addon">.00</span>
    </div>

    <div className="p-inputgroup flex-1">
      <span className="p-inputgroup-addon">password</span>
      <Password toggleMask placeholder="password" />
    </div>
  </div>

Expected behavior

No response