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

InputNumber throw error and not update the value when use browser autocomplete #6662

Closed
vnts7 opened this issue May 24, 2024 · 8 comments · Fixed by #6664, leoo1992/GeradorQRCode#40 or mtech-31-quemistry/quemistry_client_web#3
Labels
Resolution: Workaround Issue or pull request contains a workaround. It needs to be reviewed further by Core Team

Comments

@vnts7
Copy link

vnts7 commented May 24, 2024

Describe the bug

InputNumber throw error and not update the value when use browser autocomplete to enter the value

Error:

TypeError: Cannot read properties of undefined (reading 'startsWith')
    at Object.onInputKeyDown [as onKeyDown] (inputnumber.esm.js:719:1)

image

Reproducer

https://stackblitz.com/edit/vitejs-vite-mnmoqt

PrimeReact version

10.6.6

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome

Steps to reproduce the behavior

No response

Expected behavior

No response

@vnts7 vnts7 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 24, 2024
@Rekl0w
Copy link
Contributor

Rekl0w commented May 24, 2024

Can you check your stackblitz link ? I think it is not related with this issue.

@vnts7
Copy link
Author

vnts7 commented May 24, 2024

Can you check your stackblitz link ? I think it is not related with this issue.

Hi, in this demo, if you select any value from autocomplete list, you would see the "Current value" is not updated

image

@vnts7
Copy link
Author

vnts7 commented May 24, 2024

I've updated "primereact" to version "10.6.5", so you could the exception in the console too

@Rekl0w
Copy link
Contributor

Rekl0w commented May 24, 2024

PR submitted.

nitrogenous added a commit that referenced this issue May 24, 2024
Fix #6662: autocomplete value selection fix
@vnts7
Copy link
Author

vnts7 commented May 25, 2024

Hi,
I've tested again on version 10.6.6 and look like the issue is still there
The exception is gone but the value is still not being updated correctly

https://stackblitz.com/edit/vitejs-vite-mnmoqt

@melloware melloware reopened this May 25, 2024
@melloware melloware added Type: Bug Issue contains a defect related to a specific component. 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 25, 2024
@github-actions github-actions bot 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 25, 2024
@melloware melloware removed the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label May 25, 2024
@melloware
Copy link
Member

I have re-opened the ticket thanks for reporting @vnts7

@Fallup
Copy link

Fallup commented May 29, 2024

@vnts7 @melloware I think that it now behaves like it used to in previous major version - you have to use onValueChange for the browser autocomplete to work. It has been like this in the PrimeReact for a long time and for the InputNumber the onValueChange is a recommended callback to use as mentioned in the docs https://primereact.org/inputnumber/#numerals

onChange is primarily for the InputText or if you want to react to value changes in the InputNumber dynamically as user types but beware that this will interfere with the min/max props if you use them (the validation will be triggered after each keypress resulting in user not being able to change the value at all in some cases)

See https://stackblitz.com/edit/vitejs-vite-7jqdj7?file=src%2FApp.tsx

@melloware
Copy link
Member

You rock @Fallup

@melloware melloware added Resolution: Workaround Issue or pull request contains a workaround. It needs to be reviewed further by Core Team and removed Type: Bug Issue contains a defect related to a specific component. labels May 29, 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
4 participants