primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
10.33k stars 1.22k forks source link

InputGroup: Style issue when use InputGroup with Password component #5333

Open zyxkad opened 8 months ago

zyxkad commented 8 months ago

Describe the bug

When I use the <Password> component with <InputGroup> component, the border radius of password box would not reset by the inputgroup's style sheet, which will cause weird looking.

Screenshot 2024-02-24 at 06 36 23

Reproducer

https://stackblitz.com/edit/primevue-create-vue-issue-template-yksicw

PrimeVue version

3.49.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

Example code:

        <form @submit.prevent="login">
            <InputGroup>
                <InputGroupAddon>
                    <i class="pi pi-user"></i>
                </InputGroupAddon>
                <FloatLabel>
                    <InputText
                        name="username"
                        autocomplete="username"
                        v-model="username"
                    />
                    <label for="username">Username</label>
                </FloatLabel>
            </InputGroup>
            <InputGroup>
                <InputGroupAddon>
                    <i class="pi pi-lock"></i>
                </InputGroupAddon>
                <FloatLabel>
                    <Password
                        name="password"
                        v-model="password"
                        :feedback="false"
                        :inputProps="{ autocomplete: 'current-password' }"
                    />
                    <label for="password">Password</label>
                </FloatLabel>
            </InputGroup>
            <Button class="login-btn" type="submit" label="Login" icon="pi pi-sign-in" iconPos="center"/>
        </form>

Expected behavior

The connection between the InputGroupAddon and Password component should be flat

IgorKha commented 2 months ago

same and why <Password /> don't have size props?