Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

focus loses after each keyboard input for custom TextFieldComponent

See original GitHub issue

Overriding TextFieldComponent forces losing focus after each keyboard input

     return (
            <TextField
              {...props}
              value={formattedValue}
              onChange={event => setFormattedValue(event.target.value)}
            />
          );
    }}

Live example

Sandbox example https://codesandbox.io/embed/datepicker-y0dn7

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:7 (3 by maintainers)

Top GitHub Comments

4reactions

dmtrKovalenkocommented, Nov 13, 2019

Solution https://github.com/mui-org/material-ui-pickers/issues/1388

1reaction

bjutkoskicommented, Nov 13, 2019

So simple. Thank you @dmtrKovalenko @De-Santa it works for me

Top Results From Across the Web

focus loses after each keyboard input for custom ... - GitHub

Overriding TextFieldComponent forces losing focus after each keyboard input return ( setFormattedValue(event.target.value)} /> ); }} Live ...

How to make focus stable for custom text field material-ui ...

The problem is in your TextField onChange function. If you remove this attribute, you will see it stops losing focus.

How to Use the Focus Subsystem - Oracle Help Center

For more details see Customizing Focus Traversal. A component must to be prevented from losing focus, or you need to check a value...

Initializing focus state in React: you might be doing it wrong

But the element is focused, so our initial hasFocus state of false is wrong! To simulate this, I've delayed the hydration of the...

React Text Field component - Material UI - MUI

The TextField wrapper component is a complete form control including a label, input, and help text. It comes with three variants: outlined (default), ......