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.

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

    <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"
    >
      <input type="text" value="something" />
      <button>Submit</submit>
    </form>

    Hierarchy

    Index

    Constructors

    constructor

    Properties

    checkInterval checkIntervalValue confirmationValue context forceValue hasCommentsValue hasEditsValue initialFormData? notify previousFormData? blessings initialDelayValue notifyDelayValue outlets targets values

    Accessors

    application classes data element formData identifier outlets scope targets shouldLoad

    Methods

    check checkIntervalValueChanged clear confirm connect disconnect dispatch hasChanges hasEditsValueChanged initialize setInitialFormData submit afterLoad

    Constructors

    • Parameters

      • context: Context

      Returns UnsavedController

    Properties

    checkInterval: number | null = null

    Interval ID for periodic change checks.

    checkIntervalValue: number

    Duration between change checks, in milliseconds.

    confirmationValue: boolean

    Whether to show the browser confirmation dialog.

    context: Context
    forceValue: boolean

    When set to true, the initial 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.

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

    hasCommentsValue: boolean

    Whether there are unsaved comment changes in the form.

    hasEditsValue: boolean

    Whether there are unsaved edits in the form.

    initialFormData?: string

    Serialized data of the initially rendered form.

    notify: DebouncibleFunction<() => void> = ...

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

    previousFormData?: string

    Previous serialized form data for continuous change detection.

    blessings: (<T>(constructor: Constructor<T>) => any)[]
    initialDelayValue: number = 2_000

    Initial delay before setting up the check interval to allow other initializations to complete, in milliseconds.

    notifyDelayValue: number = 30

    Delay before notifying about changes, in milliseconds.

    outlets: string[]
    targets: string[]
    values: {
        checkInterval: { default: number; type: NumberConstructor };
        confirmation: { default: boolean; type: BooleanConstructor };
        force: { default: boolean; type: BooleanConstructor };
        hasComments: { default: boolean; type: BooleanConstructor };
        hasEdits: { default: boolean; type: BooleanConstructor };
    } = ...

    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

    • Parameters

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

      Returns CustomEvent<Object>

    • Checks whether the form data has changed since the last call to this method.

      Returns boolean

      whether the form data has changed

    • 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

    • Parameters

      • _identifier: string
      • _application: Application

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods