close
The Wayback Machine - https://web.archive.org/web/20220204021200/https://github.com/mui-org/material-ui/issues/29469
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

Jump to bottom

Input text type number misbehavior #29469

Open
2 tasks done
brunoluizkatz opened this issue Nov 2, 2021 · 8 comments · May be fixed by #30424
Open
2 tasks done

Input text type number misbehavior #29469

brunoluizkatz opened this issue Nov 2, 2021 · 8 comments · May be fixed by #30424
Labels
bug 🐛 component: text field good first issue

Comments

@brunoluizkatz
Copy link

@brunoluizkatz brunoluizkatz commented Nov 2, 2021 •
edited

  • The issue is present in the latest release.
  • 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:

image
image

  • In firefox and safari you can write any digit

image

  • 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

image

  • If you write only number, that behavior not occurs

image

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:

image

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
@brunoluizkatz brunoluizkatz changed the title Input text type number Input text type number misbehavior Nov 2, 2021
@ireneguijarro
Copy link

@ireneguijarro ireneguijarro commented Nov 10, 2021

I would like to work on this

@alisasanib
Copy link
Contributor

@alisasanib alisasanib commented Nov 12, 2021

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
Copy link

@prtkgoswami prtkgoswami commented Nov 24, 2021

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

@hubertnare
Copy link

@hubertnare hubertnare commented Nov 25, 2021

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
Copy link

@jasonghent98 jasonghent98 commented Dec 10, 2021

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
Copy link

@KshitijPatil39 KshitijPatil39 commented Dec 19, 2021

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

@wladimirguerra
Copy link

@wladimirguerra wladimirguerra commented Dec 27, 2021

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
Copy link

@wladimirguerra wladimirguerra commented Dec 27, 2021

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. :)

@wladimirguerra wladimirguerra linked a pull request that will close this issue Dec 28, 2021
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug 🐛 component: text field good first issue
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

[FormControl] Fix label shrink on invalid input value
9 participants
@prtkgoswami @wladimirguerra @siriwatknp @ireneguijarro @jasonghent98 @alisasanib @hubertnare @KshitijPatil39 @brunoluizkatz