[material-ui]TextField] label doesn't take its place after clearing value via inputRef (uncontrolled state)

[evgeniyworkbel]

Search keywords

mui textfield clear ref uncontrolled

Latest version

• I have tested the latest version

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/cranky-moon-lcxtdf?file=%2Fsrc%2FControlledInput.tsx%3A5%2C52

Steps:

1. see default textfield ui - label inside input, placeholder is not shown
2. focus input - see that label shrink off, placeholder is shown
3. type something to input
4. click button which clears input via ref
5. see unexpected behaviour - label didn't back to its place, it is at top of input, placeholder is shown

Current behavior

After clearing value of input, label didn't back to its place, it is at top of input, placeholder is shown

Expected behavior

After clearing value of input, label back to its place(inside of input), placeholder hides

Context

I use uncontrolled state control of text field: i pass defaultValue prop and inputRef.

I use Google Chrome lates version

Your environment

npx @mui/envinfo

 System:
    OS: macOS 14.5
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 126.0.6478.127
    Edge: Not Found
    Safari: 17.5
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.21 
    @mui/material: ^5.15.18 => 5.15.21 
    @mui/private-theming:  5.15.20 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.20 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.20 
    @types/react: ^18.2.66 => 18.3.3 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    typescript: 5.5.2 => 5.5.2 

[ZeeshanTamboli]

@evgeniyworkbel The CodeSandbox link you provided is private. Can you make it public?

[evgeniyworkbel]

@ZeeshanTamboli I had made

[ZeeshanTamboli]

@evgeniyworkbel It is because the TextField component isn't re-rendering when the value is cleared through ref because direct manipulation via ref doesn't trigger a re-render in React. You can manually control the shrink state instead: https://codesandbox.io/p/sandbox/cranky-moon-forked-8wkr3q. However, it would be better to convert your component to a controlled TextField component to handle value clearing more effectively.

[evgeniyworkbel]

@evgeniyworkbel It is because the TextField component isn't re-rendering when the value is cleared through ref because direct manipulation via ref doesn't trigger a re-render in React. You can manually control the shrink state instead: https://codesandbox.io/p/sandbox/cranky-moon-forked-8wkr3q. However, it would be better to convert your component to a controlled TextField component to handle value clearing more effectively.

The CodeSandbox link you provided is private. Can you make it public?

[ZeeshanTamboli]

@evgeniyworkbel It is because the TextField component isn't re-rendering when the value is cleared through ref because direct manipulation via ref doesn't trigger a re-render in React. You can manually control the shrink state instead: https://codesandbox.io/p/sandbox/cranky-moon-forked-8wkr3q. However, it would be better to convert your component to a controlled TextField component to handle value clearing more effectively.

The CodeSandbox link you provided is private. Can you make it public?

Made it public now.

[evgeniyworkbel]

The behaviour in example is weird

[ZeeshanTamboli]

The behaviour in example is weird

What is weird?

[evgeniyworkbel]

The behaviour in example is weird

What is weird?

Label is not shrinked when is typing

[ZeeshanTamboli]

The behaviour in example is weird

What is weird?

Label is not shrinked when is typing

I updated the CodeSandbox: https://codesandbox.io/p/sandbox/cranky-moon-forked-8wkr3q. As asked before, why don't you convert your component to controlled component to handle such cases seamlessly.

[evgeniyworkbel]

The behaviour in example is weird

What is weird?

Label is not shrinked when is typing

I updated the CodeSandbox: https://codesandbox.io/p/sandbox/cranky-moon-forked-8wkr3q. As asked before, why don't you convert your component to controlled component to handle such cases seamlessly.

Because I need to debounce value inside to update search params

[ZeeshanTamboli]

The behaviour in example is weird

What is weird?

Label is not shrinked when is typing

I updated the CodeSandbox: https://codesandbox.io/p/sandbox/cranky-moon-forked-8wkr3q. As asked before, why don't you convert your component to controlled component to handle such cases seamlessly.

Because I need to debounce value inside to update search params

And you can't do that with a controlled component? Can you show an example? Does the updated CodeSandbox work for you?

[evgeniyworkbel]

The behaviour in example is weird

What is weird?

Label is not shrinked when is typing

I updated the CodeSandbox: https://codesandbox.io/p/sandbox/cranky-moon-forked-8wkr3q. As asked before, why don't you convert your component to controlled component to handle such cases seamlessly.

Because I need to debounce value inside to update search params

And you can't do that with a controlled component? Can you show an example? Does the updated CodeSandbox work for you?

https://codesandbox.io/p/sandbox/cranky-moon-forked-s55hpw?file=%2Fsrc%2FApp.tsx%3A17%2C36

[ZeeshanTamboli]

The behaviour in example is weird

What is weird?

Label is not shrinked when is typing

I updated the CodeSandbox: https://codesandbox.io/p/sandbox/cranky-moon-forked-8wkr3q. As asked before, why don't you convert your component to controlled component to handle such cases seamlessly.

Because I need to debounce value inside to update search params

And you can't do that with a controlled component? Can you show an example? Does the updated CodeSandbox work for you?

https://codesandbox.io/p/sandbox/cranky-moon-forked-s55hpw?file=%2Fsrc%2FApp.tsx%3A17%2C36

You are debouncing the function wrong. debounce from @mui/material returns a callback. See the updated CodeSandbox: https://codesandbox.io/p/sandbox/cranky-moon-forked-fn2x9x?file=%2Fsrc%2FControlledInput.tsx%3A18%2C17. Also make sure to clear the callback after unmounting with debouncedOnChange.clear().

[evgeniyworkbel]

The behaviour in example is weird

What is weird?

Label is not shrinked when is typing

I updated the CodeSandbox: https://codesandbox.io/p/sandbox/cranky-moon-forked-8wkr3q. As asked before, why don't you convert your component to controlled component to handle such cases seamlessly.

Because I need to debounce value inside to update search params

And you can't do that with a controlled component? Can you show an example? Does the updated CodeSandbox work for you?

https://codesandbox.io/p/sandbox/cranky-moon-forked-s55hpw?file=%2Fsrc%2FApp.tsx%3A17%2C36

You are debouncing the function wrong. debounce from @mui/material returns a callback. See the updated CodeSandbox: https://codesandbox.io/p/sandbox/cranky-moon-forked-fn2x9x?file=%2Fsrc%2FControlledInput.tsx%3A18%2C17. Also make sure to clear the callback after unmounting with debouncedOnChange.clear().

it makes sense but the problem remains: controlled input is debounced badly - user wants to type fast and controlled input don't allow this

[ZeeshanTamboli]

The behaviour in example is weird

What is weird?

Label is not shrinked when is typing

I updated the CodeSandbox: https://codesandbox.io/p/sandbox/cranky-moon-forked-8wkr3q. As asked before, why don't you convert your component to controlled component to handle such cases seamlessly.

Because I need to debounce value inside to update search params

And you can't do that with a controlled component? Can you show an example? Does the updated CodeSandbox work for you?

https://codesandbox.io/p/sandbox/cranky-moon-forked-s55hpw?file=%2Fsrc%2FApp.tsx%3A17%2C36

You are debouncing the function wrong. debounce from @mui/material returns a callback. See the updated CodeSandbox: https://codesandbox.io/p/sandbox/cranky-moon-forked-fn2x9x?file=%2Fsrc%2FControlledInput.tsx%3A18%2C17. Also make sure to clear the callback after unmounting with debouncedOnChange.clear().

it makes sense but the problem remains: controlled input is debounced badly - user wants to type fast and controlled input don't allow this

You can sync the value with local state: https://codesandbox.io/p/sandbox/cranky-moon-forked-fn2x9x?file=%2Fsrc%2FControlledInput.tsx%3A15%2C31. I suggest asking such questions on StackOverflow.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.