Formik: Data lost when using FastField + "Enter-to-submit"

[leesiongchan]

Bug, Feature, or Question?

Bug

Current Behavior

Data lost when submit using Enter key.

Desired Behavior

Should save data before submitting.

Suggested Solutions

Additional Information

---

• Formik Version: 1.0.0-alpha.4
• React Version: 16.3
• TypeScript Version:
• CodeSandbox Link: https://codesandbox.io/s/lxyxol8j99
• OS:
• Node Version:
• Package Manager and Version: yarn

[jaredpalmer]

Hrmmmm. I wonderrr if we need to add an enter key press listener to auto blur the field. Right now fast field only sends up its local state to the parent if onBlur is called. Anyone else have a suggested solution?

[jaredpalmer]

Okay yes I confirmed the described behavior just now on my iPhone. Thank you for the sandbox. Very helpful.

[jaredpalmer]

I have been thinking about how to solve this one. I have a hunch that I will try to prototype tomorrow. Basic gist is to register a fn in each FastField that can lift up local value state to parent Formik. The parent Formik will keep an array of these. Before validation starts, it could loop through and atomically update state in the parent.

[jaredpalmer]

This should solve the enter key issue.

[lookfirst]

@jaredpalmer I'm seeing this when I hit enter in a form that only has one input. Using 1.0a6. I'm using it in a modal which closes and thus the component goes away.

Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in Formik (created by MyComponent)

[lookfirst]

possibly related: https://github.com/jaredpalmer/formik/issues/597

[jaredpalmer]

I think i have the solution: https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement

It would be dom only, but we could get the active element value when the enter key is pressed.

[ernestopye]

Somewhat unrelated - thoughts on not only updating form state on field blur, but perhaps have it debounced or throttled from FastField? FastField only updating as needed is awesome, but sometimes the UX isn't great when you have to click away from the field to know certain options as available (due to them requiring a re-render to update).

For example save/reset buttons with disabled={!dirty} would be disabled until you lost focus after changing at least one field, at which point "dirty" is set and the buttons re-render.

I know it doesn't fully solve this specific issue. I ran into this exact same problem with some components I wrote for work. It made the issue less noticeable however, as you'd have to press enter pretty quickly after typing something for it to break. 😄

Let me know your thoughts. I'd like to help if possible.

[ericbiewener]

Currently trying a solution that uses a data attribute to communicate to onSubmit whether or not to modify the values:

const { activeElement} = document;
if (activeElement instanceof HTMLInputElement && activeElement.dataset.fastField) {
  values = {
    ...values,
    [activeElement.name]: activeElement.value,
  }
}

[gustavopch]

Any news on this?

[jaredpalmer]

This is fixed in 1.2.