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

Password: ToggleMask overwrite input width #6568

Closed
GabriellReis14 opened this issue May 4, 2024 · 1 comment
Closed

Password: ToggleMask overwrite input width #6568

GabriellReis14 opened this issue May 4, 2024 · 1 comment
Labels
Resolution: Workaround Issue or pull request contains a workaround. It needs to be reviewed further by Core Team

Comments

@GabriellReis14
Copy link
Contributor

Describe the bug

When enable toggleMask, and inputClassName set to w-full, the input change the width to a fixed value.

Reproducer

https://stackblitz.com/edit/yfukmd?file=src%2FApp.jsx

PrimeReact version

10.6.5

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

Expected respect the defined width of input

@GabriellReis14 GabriellReis14 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label May 4, 2024
@melloware
Copy link
Member

You have to add w-full to iconField now pt={{ iconField: { root: { className: 'w-full' } } }}...

Fixed your stackblitz: https://stackblitz.com/edit/yfukmd-zhtknd?file=src%2FApp.jsx

<Password
        value={value}
        onChange={(e) => setValue(e.target.value)}
        inputClassName="w-full"
        className="bg-red-100 w-full"
        toggleMask
        pt={{ iconField: { root: { className: 'w-full' } } }}
      />

@melloware melloware added Resolution: Workaround Issue or pull request contains a workaround. It needs to be reviewed further 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 May 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Resolution: Workaround Issue or pull request contains a workaround. It needs to be reviewed further by Core Team
Projects
None yet
Development

No branches or pull requests

2 participants