Wagtail client-side components
    Preparing search index...

    Class SyncController

    Adds ability to sync the value or interactions with one input with one or more targeted other inputs.

    <section>
      <input type="text" name="title" id="title" />
      <input
        type="date"
        id="event-date"
        name="event-date"
        value="2025-07-22"
        data-controller="w-sync"
        data-w-sync-name-value="image"
        data-action="change->w-sync#apply cut->w-sync#clear focus->w-sync#check"
        data-w-sync-target-value="#title"
      />
    </section>

    -
    • add an example of using w-sync with a file input

    Hierarchy

    Index

    Constructors

    constructor

    Properties

    context debounceValue delayValue disabledValue nameValue normalizeValue quietValue targetValue blessings outlets targets values

    Accessors

    application classes data element identifier outlets scope targets value shouldLoad

    Methods

    apply check clear connect disconnect dispatch initialize ping processTargetElements afterLoad

    Constructors

    • Parameters

      • context: Context

      Returns SyncController

    Properties

    context: Context
    debounceValue: number

    The debounce delay in milliseconds, defaults to 100.

    delayValue: number

    The delay before applying the value to the target(s), defaults to 0.

    disabledValue: boolean

    If true, the sync controller is disabled and will not apply changes.

    nameValue: string

    A custom name to use in the event's detail object when dispatching events.

    normalizeValue: boolean

    If true, the value will be normalized (e.g. file input will have the extension & fakepath removed) before being applied to the target(s).

    quietValue: boolean

    If true, the change event will not be dispatched after applying a new value.

    targetValue: string

    The target element(s) to sync with, a CSS selector.

    blessings: (<T>(constructor: Constructor<T>) => any)[]
    outlets: string[]
    targets: string[]
    values: {
        debounce: { default: number; type: NumberConstructor };
        delay: { default: number; type: NumberConstructor };
        disabled: { default: boolean; type: BooleanConstructor };
        name: { default: string; type: StringConstructor };
        normalize: { default: boolean; type: BooleanConstructor };
        quiet: { default: boolean; type: BooleanConstructor };
        target: 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 value(): string

      Resolve the controlled element's value that will be used for applying and event dispatching, if configured it will also normalize this value.

      Returns string

    • get shouldLoad(): boolean

      Returns boolean

    Methods

    • Applies a value from the controlled element to the targeted elements. Calls to this method are debounced based on the controller's debounceValue.

      Applying of the value to the targets can be done with a delay, based on the controller's delayValue.

      Parameters

      • __namedParameters: SyncControllerEvent

      Returns void

    • Allows for targeted elements to determine, via preventing the default event, whether this sync controller should be disabled.

      Parameters

      • __namedParameters: SyncControllerEvent

      Returns void

    • Clears the value of the targeted elements.

      Parameters

      • __namedParameters: SyncControllerEvent

      Returns void

    • Dispatches an event to all target elements so that they can be notified that a sync has started, allowing them to disable the sync by preventing default.

      Returns void

    • Returns void

    • Parameters

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

      Returns CustomEvent<Object>

    • Returns void

    • Simple method to dispatch a ping event to the targeted elements.

      This is the only method that will bubble by default.

      Parameters

      • __namedParameters: SyncControllerEvent

      Returns void

    • Returns the non-default prevented elements that are targets of this sync controller. Additionally allows this processing to enable or disable this controller instance's sync behavior.

      Parameters

      • eventName: string
      • options: {} = {}
      • resetDisabledValue: boolean = false

      Returns HTMLInputElement[]

    • Add event listeners to adapt the SyncController apply event to the documented wagtail:images-upload & wagtail:documents-upload events.

      This intentionally overrides the existing behavior that uses delay and quiet so that the existing event dispatching is preserved.

      In a future release we may revisit this and add a deprecation path for this mechanism of event dispatching.

      Parameters

      • identifier: string

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods