避免在Material-UI中多次调用自动对焦 <TextField> 零件

Question

This question is related to material-ui <TextField> component, however the solution is likely to be found in React itself.

Imagine we're doing a simple login form. The login form is represented by a state machine.

{
  empty: {},
  filled: { typing, authenticating }
}

I have a <LoginForm> component which renders two <TextField> components and a <Button> . The first <TextField> autofocuses on mount. Pretty simple.

I have a parent component that manages the current state of the machine, and renders different components based on its value, as follows:

• empty: <Empty> component which renders the <LoginForm> with certain props
• filled: <Wrapper> component - equivalent to <Fragment>

Any of the states under filled are rendered as a child of <Wrapper> .

• typing: <Typing> component which renders <LoginForm> with different props
• authenticating: <Authenticating> component which renders a spinner.

empty state transitions to filled when one of the <TextBox> components are no longer empty.

---

Problem:

Imagine we start in the empty state. It renders <Empty> which renders <LoginForm> which renders username <TextField> with autofocus.

We have focused on the username input and start typing. All is good.

However imagine we started typing in the password first (ie the 2nd <TextBox> that doesn't autofocus). We start in the empty state, write the first letter of our password, transition to filled>typing state which seems to remount <LoginForm> and autofocus once again to username input. The result is that you can write the first letter for the password, and subsequent letters get added to the username input due to the re-autofocus.

I figured since the markup produced by react is essentially the same (by virtue of wrapper components with no rendering of their own) that there would be no re-mounting, and thus we only get the autofocus on first mount (ie when starting in empty ).

How might I resolve this?

Answer 1

Before (problematic code):

const LoginMachineDelegator = () => {
  const props = {
    machine: init.machine,
    render: {
      [init.STATES.EMPTY]: Empty,
      [init.STATES.FILLED]: Wrapper,
      [init.STATES.TYPING]: Typing,
      [init.STATES.AUTHENTICATING]: Authenticating
    }
  }

  return <MachineDelegator {...props}/>;
}

React component tree when in empty state:

MachineDelegator > Empty > LoginForm

React component tree when in filled>typing state:

MachineDelegator > Wrapper > Typing > LoginForm

---

After (reconciled code):

const LoginMachineDelegator = () => {
  const props = {
    machine: init.machine,
    [init.STATES.EMPTY]: { func: createEmptyLoginForm },
    [init.STATES.FILLED]: { /* no element */ },
    [init.STATES.TYPING]: { func: createTypingLoginForm },
    [init.STATES.AUTHENTICATING]: { component: Authentication }
  }
}

Because the functions return a react element, they themselves do not get inserted into the React component tree. Instead the returning element is. As such, the new component tree would look like this:

When in empty state:

MachineDelegator > LoginForm

When in filled>typing state:

MachineDelegator > LoginForm

---

This ensures that the LoginForm does not get re-mounted and re-rendered