0

I was using an older version of the library and had things working as expected. When I updated to the latest, I started to see issues with loosing focus when typing values into a TextField. However, I can't generate a way to replicate the issue because I have a validation script and layers of scope that I'm dealing with.

Key observations:

  • The issues arise when I change the component from Input to TextField => instant malfunction with focus.

  • This is only relevant for a "controlled" component with an onChange callback; onBlur is not a problem.

There are similar questions/answers on both stackOverflow and in the issues archive using TextField in various contexts.

From what I can gather, there are several troubleshooting options. Would it be possible to let me know if there are others?

  1. must set the name prop (not so with Input)
  2. turn off autoFocus?
  3. use value instead of defaultValue (required for onChange)
  4. set inputRef={input => input && input.focus()}?
  5. use an id that does not change value between renders
  6. use indirection by wrapping the TextField
  7. avoid defining functions inside the definition of the component

Other: to help debug, track the value of the active element using document.activeElement in the devTools debugger.

I recognize that a lot of this should be well understood from a basic understanding of html forms. However, what makes it tricky is that we are dealing with an API (a wonderful API at that :), that abstracts much of what is going on under the hood, and thus the need for an API-specific "howto".

Thank you for letting me know ideas for how to troubleshoot this thoroughly annoying and debilitating misunderstanding in how I'm doing things.

Thank you in advance!

- E

Edmund's Echo
  • 766
  • 8
  • 15
  • 1
    The most common cause I see for this is that the state change is causing the TextField to be re-mounted -- not just re-rendered. The most common cause of the re-mounting is that the TextField is within a component that isn't defined at the top-level, so each re-render the parent component looks like a different component type to React and everything under it gets remounted. One example: https://stackoverflow.com/questions/56873912/react-beginner-question-textfield-losing-focus-on-update/56874906#56874906 – Ryan Cogswell Jul 20 '20 at 20:03
  • Any further tips would require seeing the code involved. – Ryan Cogswell Jul 20 '20 at 20:04
  • @RyanCogswell Thank you. This is the approach I'm looking for to figure it out. I'll report back once I digest the information in the link provided. – Edmund's Echo Jul 20 '20 at 21:15

0 Answers0