[Bug]: Previous state is not preserved after history back.

[mitchell-up]

Package Scope

@use-funnel/core

Bug description

I think it's intended, considering the mechanism of history state.

However, when users navigate back and forward in the long funnel, it's important to keep the previous state rather than initializing it.

Do you think this behavior is incorrect? And are there any appropriate ways to work around or handle this issue?

Expected behavior

For example, users can enter email and password values in the funnel.

I expected that if I send the context[value] as an initial value, I could keep the changed context.

type EmailStep = { email?: string; password?: string };
type PasswordStep = { email: string; password?: string };

export default function TestFunnel() {
  const funnel = useFunnel<{
    emailStep: EmailStep;
    passwordStep: PasswordStep;
  }>({
    id: 'test-funnel',
    initial: {
      step: 'emailStep',
      context: {},
    },
  });

  return (
    <funnel.Render
      emailStep={({ context, history }) => (
        <div>
          <Input
            initial={context.email}
            placeholder={'Email'}
            onNext={(email) => history.push('passwordStep', { email })}
          />
        </div>
      )}
      passwordStep={({ context, history }) => (
        <div>
          <Input
            initial={context.password}
            placeholder={'Password'}
            onNext={(password) => console.log(context)}
          />
        </div>
      )}
    />
  );
}

To Reproduce

https://stackblitz.com/edit/stackblitz-starters-djxeri?file=README.md

Possible Solution

Perhaps it seems natural that values in the context's initial state depend on history state, so some values are always initialized according to history back.

Therefore, I suggest providing an additional option like keepState: true to maintain these values.

etc.

I would be willing to contribute to fixing this issue if you think it needs to be fixed.

[minuukang]

@mitchell-up Sorry for late reply, thanks for your issue. I was thinking about how I could solve this problem right away and how to provide these options as an interface.

The immediately solve idea is

history.replace('emailStep', { email })
history.push('passwordStep', { email })

In this way, you can replace() before push() to execute the desired behavior.

We'll consider supporting this with an option like keepState: true.

Thank you!