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

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

from material-ui.

@ZeeshanTamboli I had made

from material-ui.

@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.

from material-ui.

@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?

from material-ui.

@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.

from material-ui.

The behaviour in example is weird

from material-ui.

The behaviour in example is weird

What is weird?

from material-ui.

The behaviour in example is weird

What is weird?

Label is not shrinked when is typing

from material-ui.

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.

from material-ui.

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

from material-ui.

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?

from material-ui.

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

from material-ui.

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

from material-ui.

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

from material-ui.

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.

from material-ui.

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.

from material-ui.