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.

Sign up for GitHub

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

Jump to bottom

IconField: Doesn't work with InputNumber #6015

Open
slavco86 opened this issue Jul 5, 2024 · 4 comments
Open

IconField: Doesn't work with InputNumber #6015

slavco86 opened this issue Jul 5, 2024 · 4 comments
Labels
design-token Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Milestone
Future

Comments

@slavco86
Copy link

slavco86 commented Jul 5, 2024

Describe the bug

IconField does not work when used together with InputNumber due to how InputNumber is structured, wrapping the input

Reproducer

https://stackblitz.com/edit/zwobe8?file=src%2FApp.vue

PrimeVue version

3.51.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

Go to repro link and observer the difference in rendering between using NumberInput and TextInput

Expected behavior

Should support using IcondField with NumberInput the same way as it does for TextInput
@slavco86 slavco86 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jul 5, 2024
@Lerwox
Copy link

Lerwox commented Oct 4, 2024

+1

WatCodeDatCode added a commit to WatCodeDatCode/primevue that referenced this issue Oct 4, 2024
@WatCodeDatCode
fix: primefaces#6015 IconField compatibility with InputNumber
6422362
@WatCodeDatCode WatCodeDatCode mentioned this issue Oct 4, 2024
Closed
@WatCodeDatCode
Copy link
Contributor

I added a potential fix that the core team can better evaluate, but as you pointed out the markup causes the issue given the theme adding the extra padding only when the input field is a direct ancestor. If not done so already, you should be able to override with a similar CSS rule locally.

@james-onpoint
Copy link

+1, really want this!

@tugcekucukoglu tugcekucukoglu added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Nov 13, 2024
@tugcekucukoglu tugcekucukoglu added this to the 3.54.0 milestone Nov 13, 2024
@tugcekucukoglu tugcekucukoglu removed this from the 3.54.0 milestone Dec 11, 2024
@tugcekucukoglu tugcekucukoglu added Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add and removed Type: Bug Issue contains a bug related to a specific component. Something about the component is not working labels Dec 11, 2024
@github-project-automation github-project-automation bot moved this to Review in PrimeVue Dec 11, 2024
@tugcekucukoglu tugcekucukoglu added this to the Future milestone Dec 11, 2024
@james-astra
Copy link

It would be great to see IconField work on all inputs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
design-token Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Projects
PrimeVue
Status: Review
Milestone
Future
Development

No branches or pull requests
6 participants
@slavco86 @tugcekucukoglu @Lerwox @WatCodeDatCode @james-astra @james-onpoint