search

final-form / react-final-form

🏁 High performance subscription-based form state management for React
https://final-form.org/react
MIT License
7.39k stars 481 forks source link

meta.active not true when using autofocus #558

Open TaylorRayHoward opened 5 years ago

TaylorRayHoward commented 5 years ago

Are you submitting a bug report or a feature request?

Bug Report

What is the current behavior?

meta.active is not set to true when using autofocus

What is the expected behavior?

When a field has autofocus on it and is initially rendered, the meta.active should be true

Sandbox Link

https://codesandbox.io/s/0eob8

If you look at the console.log output on the first render, meta.active is false. If you blur, then refocus the field, meta.active is true. I would expect meta.active to be true on an autofocued field.

What's your environment?

Lastest versions of FF and RFF, tested in chrome and FF and same issue.

Other information

sm2017 commented 5 years ago

I have same issue @TaylorRayHoward any soloution?

TaylorRayHoward commented 5 years ago

@sm2017 Sadly, no. We are just working around it by not using it currently.

khmm12 commented 4 years ago

More internal details: The problem is final-form registers a field after its mounting. Even if you call onFocus in componentDidMount/useEffect, final-final won't set active state.

As temporary workaround it can be solved by input.focus() inside parent useEffect/ref handler.

Regarding to "out-of-box"... final-form should register fields on first render before mount, but we know that effects should be done in useEffect/useLayoutEffect, because they are concurrent mode safe. So that's impossible to register on first render. How to call something before mount once time and dispose if a component is not mounted? It's known issue of React. Follow the discussion https://github.com/facebook/react/issues/15317.