Input text type number misbehavior

[brunoluizkatz-NETZSCH]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

• Chrome version:
  • 95.0.4638.54 (Official Build) (64-bit) (ubuntu)
  • 95.0.4638.54 (Official Build) (64-bit) (windows)
  • 94.0.4606.85 (Official Build) (Android 10)
• Firefox version: 93.0 (ubuntu)
• Safari version: Versão 15.0 (16612.1.29.41.4, 16612) (ios big sur)

When you writes a "e" in the input text type number, the "title" of the field comes back to the middle of input text:

• In firefox and safari you can write any digit

• In chrome for Android, we cannot write the letter e, but we can force to write a dot in the end of the number, resulting in the same behavior

• If you write only number, that behavior not occurs

They occurs directly into the codesandbox example for the input text page in the current release version

https://codesandbox.io/s/vvitc?file=/demo.js

Expected Behavior 🤔

• Keep the title like this:

Steps to Reproduce 🕹

Steps:

1. Enter in oficial sandbox environment https://codesandbox.io/s/vvitc?file=/demo.js
2. Change any input text to type="number"
3. Write the digit e
4. Remove focus from input, the title of the input will go to the "default empty location"

Your Environment 🌎

https://codesandbox.io/s/vvitc?file=/demo.js

[ireneguijarro]

I would like to work on this

[alisasanib]

I think there is a workaround for this issue, according to the doc. Passing InputLabelProps={{ shrink: true }} as a prop to the TextField component will avoid this situation.

[prtkgoswami]

I see this isn't assigned to anyone? Can I give it a try?

[hubertnare]

I think there is a workaround for this issue, according to the doc. Passing InputLabelProps={{ shrink: true }} as a prop to the TextField component will avoid this situation.

This solves the issue...

[jasonghent98]

Has this issue been resolved/closed yet? It seems like the problem has been solved @alisasanib . Unless there is something else that needs to be fixed.

[KshitijPatil39]

Is anyone working on this? If not I will make the changes and create a PR

[wladimirguerra]

I think there is a workaround for this issue, according to the doc. Passing InputLabelProps={{ shrink: true }} as a prop to the TextField component will avoid this situation.

This solves the issue...

I don't think so. It is a good workaround though.

What if I have a form with multiple inputs? I would like them to have same look and feel. In case the form have a number or date input mixed with other text inputs, I would be forced to make all input labels to be shrunk.

I believe that issue should be properly resolved.

[wladimirguerra]

It seems that no one is working on that. I have made the changes and will work on the tests. Soon I will create a PR, if no one does first. :)

[Mansvini]

What is the location of the file which contains the sandbox code which needs to be edited in the repository?

[shabar-shab]

@wladimirguerra is this still open I would like to work on this.

[wladimirguerra]

Hi Shabir, Be my guest!

Wladimir

Em 26 de jul. de 2022, à(s) 15:47, Shabir Ahmad @.***> escreveu:

 @wladimirguerra is this still open I would like to work on this.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[adarshanand67]

Is this issue still open? I would like to work on it. I'm a first timer. Could you put me through on the details so I could know what to do?

[wladimirguerra]

@adarshanand67 have a look at this draft to attempt to fix the problem. It seems to be simple but it is hard to make a proper test case because of the testing library limitation. I am not sure that the changes fixed the problem.

[prankurpandeyy]

If this issue is still open can I give it a try ?

[michaldudak]

@prankurnov15 feel free to take it. It's not assigned to anyone.

[vguleria1108]

Issue is with <input type="number" /> itself. So In my opinion this can be solved by adding Regex check for type number

[kanishbodhwani]

Is this issue still open ? I want to work on it

[michaldudak]

@kanishbodhwani do you have an idea of how you'd like to fix the problem? The number input has some inherent issues, and its behavior differs across browsers. There's a good article describing the problem: https://stackoverflow.blog/2022/09/15/why-the-number-input-is-the-worst-input/

[kanishbodhwani]

@michaldudak Can I make a function that restricts user to input e in the text field, I've already tried in code sandbox, It worked for me. Please correct me if I am wrong

[michaldudak]

It's not just about "e". There are other characters ("+", "-", ".") that can make the input value invalid when misused. IMO recommending not to use type="number" would be the safest option.

[kanishbodhwani]

There are not more, A single function can fix them all

[kanishbodhwani]

I think this will work for chrome, not sure for other browsers.

Please review this

PS: I am not good in naming functions

[michaldudak]

As stated in the description of the issue and the article I linked, other browsers behave differently. In Firefox, for example, you can type any character. While I appreciate your efforts, I don't want to include a half-baked solution.

Additionally, your solution does not consider pasting a value in the input.

[kanishbodhwani]

Okay, Thank you for the update. Will solve another issue :) 😊

[jesrodri]

Hi, can I try this one?

[shehand-xino]

I have experienced this not only in the input fields but also in select dropdowns.

[michaldudak]

@jesrodri what idea do you have for solving this?

@shehand-xino, please open another issue with a reproduction on codesandbox so we can reproduce this bug.

[Aryan-Bhatt-pro]

Hi, is the issue still open? can I try on this?

[michaldudak]

I think the "good first issue" label wasn't too accurate, to say the least. This is a pretty complicated problem, and we need to discuss the possible solutions that will work across all browsers (if there are any). As I said before, for now I'd recommend not using type=number at all.

[wladimirguerra]

Agreed! It is also very difficult to write proper test cases too, since the behavior for invalid values is not standardized.

Em 5 de out. de 2022, à(s) 13:08, Michał Dudak @.***> escreveu:

 I think the "good first issue" label wasn't too accurate, to say the least. This is a pretty complicated problem, and we need to discuss the possible solutions that will work across all browsers. As I said before, I'd recommend not using type=number at all.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.