[FormControl] Fix label shrink on invalid input value

[wladimirguerra]

Here is the fix. I believe integration tests in different browsers are needed but I don't know how to do it. Does anyone can help me on this?

Closes: #29469

• I have followed (at least) the PR section of the contributing guide.

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 16815b8

[mnajdova]

Doesn't look like it works, I've tested it here in the first TextField - https://codesandbox.io/s/basictextfields-material-demo-forked-99w2m?file=/demo.js

Steps to reproduce:

1. Click on the first input
2. Change the value from "2" to "e"
3. Click outside of the TextField

[wladimirguerra]

Hey @mnajdova,
Thanks for the reply. I am struggling to run the documentation as dev (yarn && yarn docs:dev or in the root yarn start), so I can look what is going wrong. The change made in TextField is updated, but I need to change the documentation too ( FormPropsTextFields.tsx ) and it is not being updated (even if I run the documentation as dev after the changes). Any help on this?

[wladimirguerra]

Hi there, has been a while that I don't look into this issue. It is clear that the way is to test .validity.badInput. The problem is that the isFilled's obj argument is not always an <input>. Looking deeper in the code now to figure out a solution.

[wladimirguerra]

Hey @danilo-leal looking into the code it seems that the component is FormControl. It is who manages the filled state. The text field renders a FormControl with its own contexts props.

[danilo-leal]

@wladimirguerra we usually use the text field label for Form Control PRs and issues. I guess it does make sense to create one label for it specifically, especially because it's available in the Base package as well. But anyway, off-topic to the PR :)

[mui-bot]

Details of bundle changes

@material-ui/core: parsed: -3.38% 😍, gzip: -2.90% 😍
@material-ui/lab: parsed: +0.06% , gzip: +0.26%
@material-ui/styles: parsed: -1.61% 😍, gzip: -2.43% 😍
@material-ui/private-theming: parsed: -43.99% 😍, gzip: -42.10% 😍
@material-ui/system: parsed: -1.14% 😍, gzip: -1.58% 😍
@material-ui/unstyled: parsed: +42.12% , gzip: +29.02%
@mui/material-next: parsed: -0.21% 😍, gzip: -0.38% 😍
@mui/joy: parsed: +12.22% , gzip: +9.21%

Generated by 🚫 dangerJS against 70cf808

[siriwatknp]

👋 The migration PR has been merged.

Please follow these steps to make sure that the contents are all updated. (Sorry for the inconvenience)

1. pull latest master from upstream to your branch
2. if your PR has changes on the *.md or demo files, you are likely to encounter conflict because all of them have been moved to the new folder.
   2.1 revert the change on those markdown files you did
   2.2 pull latest master from upstream (you should not see conflict)
   2.3 make the changes again at docs/data/material/*
3. run yarn docs:api
   • you might see the changes in docs/pages/material/api/* if your PR touches some of the components
   • it is okay if there is no changes

If you are struggle with the steps above, feel free to tag @siriwatknp

[mnajdova]

Hey @mnajdova,
Thanks for the reply. I am struggling to run the documentation as dev (yarn && yarn docs:dev or in the root yarn start), so I can look what is going wrong. The change made in TextField is updated, but I need to change the documentation too ( FormPropsTextFields.tsx ) and it is not being updated (even if I run the documentation as dev after the changes). Any help on this?

I am very sorry, I have missed this notification.

In the root you should be able to run:

yarn
yarn docs:dev

This will run the docs locally. Before pushing always make sure that you have run:

yarn prettier
yarn proptypes
yarn docs:api
yarn docs:typescript:formatted

These comments should make sure the CI is green. You should also check

yarn lint

[siriwatknp]

I suggest closing this PR and creating a new one due to the code conflicts are very large (too risky)

[wladimirguerra]

I suggest closing this PR and creating a new one due to the code conflicts are very large (too risky)

Ok @siriwatknp I will do that.

[wladimirguerra]

👋 The migration PR has been merged.

Please follow these steps to make sure that the contents are all updated. (Sorry for the inconvenience)

1. pull latest master from upstream to your branch

2. if your PR has changes on the *.md or demo files, you are likely to encounter conflict because all of them have been moved to the new folder.
   2.1 revert the change on those markdown files you did
   2.2 pull latest master from upstream (you should not see conflict)
   2.3 make the changes again at docs/data/material/*

3. run yarn docs:api

   • you might see the changes in docs/pages/material/api/* if your PR touches some of the components
   • it is okay if there is no changes

If you are struggle with the steps above, feel free to tag @siriwatknp

I have made changes in ./docs/data/material/components/text-fields/FormPropsTextField.tsx removing the shrink: true from numbers type's TextField, followed the steps proposed, and run yarn docs:dev, but it didn't work. The documentation page didn't change. I guess I am missing a build step or something.

[wladimirguerra]

I tried to create some test cases, but there is an issue in testing-library that is not easy to work around.

Because of that, I couldn't properly test my changes. I will look a little deeper to find a workaround to the test case.
A help would be well accepted in this point.

Anyway, ASAP when I get things working I will open another PR.

Regards

[mnajdova]

@wladimirguerra feel free to open the PR in draft version and ping someone from the core team to help with the tests if you are stack.

[wladimirguerra]

Hi there, here is the new attempt to fix the problem.