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

Comma in NumberInput not accepted with Firefox 74 #4646

Closed
kiad opened this issue Apr 6, 2020 · 4 comments · Fixed by #4652
Closed

Comma in NumberInput not accepted with Firefox 74 #4646

kiad opened this issue Apr 6, 2020 · 4 comments · Fixed by #4652

Comments

@kiad
Copy link

kiad commented Apr 6, 2020

What you were expecting:
I expected to be able to type a percentage like "65,34", with a comma

What happened instead:
Once I type the comma, the whole input is erased.

Steps to reproduce:
I have set-up a small example : https://codesandbox.io/s/frosty-allen-xm38z with a "progress" field in the post element.
The progress field follow the documentation example of parse/format : it comes as 0-1.0 from the API, but is displayed and typed as 0-100 (which I have been doing for months without any issues).

Other information:
I noticed this issue since Firefox 74.0. Works well on Safari or Chrome.

Environment

  • React-admin version: 3.4.0
  • Last version that did not exhibit the issue (if applicable):
  • React version: 16.12.0
  • Browser: Firefox 74.0
@Kmaschta
Copy link
Contributor

Kmaschta commented Apr 7, 2020

This is related to how Firefox manages input type number, because it better handles langs.

I updated the documentation to better handle this case, thanks for the issue

@kiad
Copy link
Author

kiad commented Apr 7, 2020

Thank you. I tried in the Codesansbox to add the parseFloat but it still does not all to add a comma, and not a point anymore (point works previously).

@Kmaschta
Copy link
Contributor

Kmaschta commented Apr 7, 2020

Firefox switches between a dot and a comma depending on the language defined on the HTML tag. (eg. a dot if lang="en" or a comma if lang="fr")

You can overwrite the input languages by passing the following prop:

<NumberInput source="progress" options={{ inputProps: { lang: "fr" } }} />

Source: https://stackoverflow.com/a/7610054/3868326

@kiad
Copy link
Author

kiad commented Apr 7, 2020

Thanks a lot, it works indeed (I've been reading this in the meantime).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants