stephanbogner

var paths = [
    ["Account"],
    ["Account", "Payment Methods"],
    ["Account", "Payment Methods", "Credit Card"],
    ["Account", "Payment Methods", "Paypal"],
    ["Account", "Emails"],
    ["Account", "Emails", "Main Email"],
    ["Account", "Emails", "Backup Email"],
    ["Account", "Devices"],
    ["Account", "Devices", "Google Pixel"],

oyeanuj

Here is how I ended up making this work. For more context and background on the discussion, I recommend reading conversation in ReduxForm#2169 (and chiming in with your learnings, etc).

So, as per the conversation there, I tried the 'many little forms' approach. I am sharing both my approach, and a crude abstracted out gist that can hopefully help out y'all.

Essentially, with this approach:

1. You want to use each field as a little form which submits debounced onChange.
2. For each field as a little form, you want to abstract that into a component which can be provided an input, as much as possible.
3. Set autofocus for the first form.
4. For debounced onChange, I used react-debounced-input.