🖼️
KASKO Frontend Documentation
  • README
  • Getting started
    • Setting up a new webapp
    • Webapp manifest
    • Building the flow
    • Defining layouts
    • Defining computed values
    • Defining dynamic paths
  • Core concepts
    • Forms
    • Validation
      • Using existing validators
      • Adding custom validators
    • Configuration
      • Price format
      • Date format
    • Performing API calls
    • Toggling visibility of components
    • Translations
    • Rules For Robust Application
  • Guides
    • Using logical statements (JsonLogic)
    • Adding discount codes
    • Developing Custom Plugins
    • Setting required requests
    • Adding save quote for later
    • Transforming request data
    • Manifest merging strategy
    • Knockout flow
    • Local pricing logic
    • Setting up dashboard policy profile
    • Handling offers
    • Repeater
  • Snippets
    • Reset input state
  • Useful resources
    • All component descriptions
    • JsonLogic core documentation
    • Kasko.js documentation
    • Example webapp
    • Example plugins (w/ various frameworks)
Powered by GitBook
On this page
  1. Snippets

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.data.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.data.module' },
  );
}

Last updated 9 months ago