re-initialize onFocus/onBlur handlers if the subscribed field changes

[rekotiira]

If you use useField (or <Field>) and the name of the field that you subscribe to changes during the lifetime of the component, the onFocus handler will continue calling the state.focus() function of the previous field.

The reason is that useField doesn't specify the state.focus as a dependency for React.useCallback.

It is a common use-case with forms that you, for example, have a list of items, and you want to be able to toggle between the active item that you are editing, but not render all the items in DOM, rather just the one you're editing. At the moment in these use-cases when switching between the active item, the Field does not re-mount and the handlers will not work properly.

[rekotiira]

@erikras seems like rollup has dropped support for node8 since 2.0.0:
rollup/rollup#3320

react-final-form's .travis.yml config is setup to run on node 8, 10 & 11, and as you can see the node8 build is now failing.

You can easily check this locally by cloning react-final-form and running npm install while on version 8. It'll fail even on master. Seems like the breaking change was introduced in rollup@2.3.0, 2.2.0 still works.

Should the node8 be removed from Travis CI config, or should rollup be pinned to older version?

The codesandbox is also failing to something else, but I do not think it is related to my changes. Any idea?

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 62f6435:

Sandbox	Source
icy-microservice-jefre	Configuration
youthful-swirles-4sfp5	Configuration
white-shape-f0hvq	Configuration
practical-pond-ukphv	Configuration
jolly-nash-j6rbv	Configuration

[codecov]

Codecov Report

Merging #787 into master will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##            master      #787   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           17        17           
  Lines          253       253           
  Branches        59        59           
=========================================
  Hits           253       253           

Impacted Files	Coverage Δ
src/useField.js	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 25d2040...62f6435. Read the comment docs.

[rekotiira]

@erikras I rebased master and now all the tests pass. Could this be merged? It's really annoying having to hack around this.

[erikras]

Changing the name of your field while it's mounted seems ill-advised. One could also force an unsubscribe/subscribe cycle with a key prop, but okay.

[rekotiira]

Changing the name of your field while it's mounted seems ill-advised. One could also force an unsubscribe/subscribe cycle with a key prop, but okay.

We have a form where you have a list of items you can edit, but only one of the items (the selected one) is displayed at a time. We don't on purpose change the name of the field (the name is coming as a prop from parent), it's just optimization React does when it diffs the VDOMs of previous and next state, it notices that the structure is the same and only some attributes for the elements has changed, so it decides to re-use the existing elements instead of unmounting/re-mounting.

The key is exactly how we worked around it to force re-mount, but that also has its own share of issues like if you re-mount an element that is scrollable and not scrolled to top, you lose the scroll position etc.

[erikras]

Published in v6.5.1.