Wagtail client-side components
    Preparing search index...

    Class UnsavedController

    Enables the controlled form to support prompting the user when they are about to move away from the page with potentially unsaved changes.

    Example: - Warn the user when there are unsaved edits

    <form
      data-controller="w-unsaved"
      data-action="w-unsaved#submit beforeunload@window->w-unsaved#confirm change->w-unsaved#check"
      data-w-unsaved-confirmation-value="true"
    >
      <input type="text" value="something" />
      <button>Submit</submit>
    </form>

    Example: - Watch comments for changes in addition to edits (default is edits only)

    <form
      data-controller="w-unsaved"
      data-action="w-unsaved#submit beforeunload@window->w-unsaved#confirm change->w-unsaved#check"
      data-w-unsaved-confirmation-value="true"
      data-w-unsaved-watch-value="edits comments"
    >
      <input type="text" value="something" />
      <button>Submit</submit>
    </form>

    Example: - Force the confirmation dialog

    <form
      data-controller="w-unsaved"
      data-action="w-unsaved#submit beforeunload@window->w-unsaved#confirm change->w-unsaved#check"
      data-w-unsaved-confirmation-value="true"
      data-w-unsaved-force-value="true"
    >
      <input type="text" value="something" />
      <button>Submit</submit>
    </form>

    Example: - Force the confirmation dialog without watching for edits/comments

    <form
      data-controller="w-unsaved"
      data-action="w-unsaved#submit beforeunload@window->w-unsaved#confirm"
      data-w-unsaved-confirmation-value="true"
      data-w-unsaved-force-value="true"
      data-w-unsaved-watch-value=""
    >
      <input type="text" value="something" />
      <button>Submit</submit>
    </form>

    Hierarchy

    Index

    Constructors

    constructor

    Properties

    confirmationValue context durationsValue forceValue hasCommentsValue hasEditsValue initialFormData? observer? runningCheck? watchValue blessings outlets targets values

    Accessors

    application classes data element formData identifier outlets scope targets shouldLoad

    Methods

    check clear confirm connect disconnect dispatch getIsValidNode hasCommentsValueChanged hasEditsValueChanged initialize notify submit watchComments watchEdits afterLoad

    Constructors

    • Parameters

      • context: Context

      Returns UnsavedController

    Properties

    confirmationValue: boolean

    Whether to show the browser confirmation dialog.

    context: Context
    durationsValue: { initial: number; long: number; notify: number; short: number }

    Configurable duration values.

    forceValue: boolean

    When set to true, the form will always be considered dirty. Useful for when the user just submitted an invalid form, in which case we consider the form to be dirty even on initial load.

    Setting this to true effectively disables the edit check, i.e. similar to setting watchValue to '' and setting hasEditsValue to true.

    Note that the confirmationValue must still be set to true in order for the browser confirmation dialog to appear.

    hasCommentsValue: boolean

    Value (state) tracking of what changes exist (comments).

    hasEditsValue: boolean

    Value (state) tracking of what changes exist (edits).

    initialFormData?: string
    observer?: MutationObserver
    runningCheck?: DebouncedFunction<any[], unknown>
    watchValue: string

    Determines what kinds of data will be watched, defaults to edits only.

    blessings: (<T>(constructor: Constructor<T>) => any)[]
    outlets: string[]
    targets: string[]
    values: {
        confirmation: { default: boolean; type: BooleanConstructor };
        durations: {
            default: {
                initial: number;
                long: number;
                notify: number;
                short: number;
            };
            type: ObjectConstructor;
        };
        force: { default: boolean; type: BooleanConstructor };
        hasComments: { default: boolean; type: BooleanConstructor };
        hasEdits: { default: boolean; type: BooleanConstructor };
        watch: { default: string; type: StringConstructor };
    } = ...

    Accessors

    • get application(): Application

      Returns Application

    • get classes(): ClassMap

      Returns ClassMap

    • get data(): DataMap

      Returns DataMap

    • get element(): ElementType

      Returns ElementType

    • get identifier(): string

      Returns string

    • get outlets(): OutletSet

      Returns OutletSet

    • get scope(): Scope

      Returns Scope

    • get targets(): TargetSet

      Returns TargetSet

    • get shouldLoad(): boolean

      Returns boolean

    Methods

    • Check for edits to the form with a delay based on whether the form currently has edits. If called multiple times, cancel & restart the delay timer.

      Intentionally delay the check if there are already edits to the longer delay so that the UX is improved. Users are unlikely to go back to an original state of the form after making edits.

      Returns void

    • Parameters

      • eventName: string
      • Optional__namedParameters: Partial<
            {
                bubbles: boolean;
                cancelable: boolean;
                detail: Object;
                prefix: string;
                target: Element
                | Window
                | Document;
            },
        >

      Returns CustomEvent<Object>

    • Notify the user of changes to the form. Dispatch events to update the footer message via dispatching events.

      Returns void

    • When the form is submitted, ensure that the exit confirmation does not trigger. Deactivate the confirmation by setting the confirmation value to false.

      Returns void

    • Watch for comment changes, updating the timeout to match the timings for responding to page form changes.

      Parameters

      • __namedParameters: { long: any; short: any }

      Returns void

    • Delay snap-shotting the form’s data to avoid race conditions with form widgets that might process the values. User interaction with the form within that delay also won’t trigger the confirmation message if they are only quickly viewing the form.

      While the check method will be triggered based on Stimulus actions (e.g. change/keyup) we also want to account for input DOM notes entering/existing the UI and check when that happens.

      Parameters

      • __namedParameters: { initial: any }

      Returns void

    • Parameters

      • _identifier: string
      • _application: Application

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods