Blitz query and JavaScript Set in inital values in react final form causes form reset on tab change

[tom-richter]

What is the problem?

If I use a blitz query and a rrf form with an JS Set (or Map) in the inital values, the form resets if I switch to a new browser tab. This bug doesn't occur if I remove either the set or the query from the component. The people from blitz say it's a rff issue: https://github.com/blitz-js/legacy-framework/issues/217

What are detailed steps to reproduce this?

1. Clone the minimal example https://github.com/tom-richter/rff-set-blitz-query-bug
2. Change value in the form text field
3. Open different tab or window
4. Go back to the old tab
5. Watch how the value of the field was reset
6. Remove const [question] = useQuery(getQuestion, null) or set: new Set() and observe the difference

Code

import { BlitzPage, useQuery } from "blitz"
import { Suspense } from "react"
import getQuestion from "app/queries/getQuestion"
import { Form, Field } from "react-final-form"

const Content = () => {
  const [question] = useQuery(getQuestion, null)

  return (
    <div>
      <h1>Strange Form</h1>
      <Form
        initialValues={{ name: "strange", set: new Set() }}
        onSubmit={async () => {}}
        render={({ handleSubmit, submitError }) => (
          <form onSubmit={handleSubmit} className="form">
            <Field name="name" component="input" placeholder="First Name" />

            {submitError && (
              <div role="alert" style={{ color: "red" }}>
                {submitError}
              </div>
            )}

            <button type="submit">Submit</button>
          </form>
        )}
      />
    </div>
  )
}

const Page: BlitzPage = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Content />
      </Suspense>
    </div>
  )
}

Page.suppressFirstRenderFlicker = true

export default Page

[flybayer]

Solution, use the initialValuesEqual prop. See my comment here: https://github.com/blitz-js/legacy-framework/issues/217