Reset input state

Extending input state with set-input-state event is not enough when some input field should be removed from input.

set-input-state only extends existing input, this means that when we have input {first_name: "John"} and we extend it with {last_name: "Doe"} we get {first_name: "John", last_name: "Doe"}. However reset-input-state fully overwrites whole input state with event payload, meaning in previous example we get {last_name: "Doe"} as final input state.

Useful use case for this is to save and reset input state in flow. This snippet saves state when user gets to "claim-modules" screen. And resets input value whenever input.module state value changes.

export function customService(kasko) {
  let savedInput;

  function routeChangedHandler({ current }) {
    if (current?.path !== 'claim-modules') {
      return;
    }

    // Save current input state
    savedInput = kasko.getState('input');

    // Stop listening after input is saved
    kasko.removeEventListener('route-changed', routeChangedHandler);
  }

  kasko.addEventListener('route-changed', routeChangedHandler);

  kasko.addEventListener(
    'state-changed',
    (module) => {
      if (!module) {
        return;
      }

      if (savedInput) {
        kasko.dispatchEvent('reset-state-input', {
          module,
          ...savedInput,
        });
      }

      // Do some extra logic or events
    },
    { slice: 'input.module' },
  );
}

Last updated