Doesn't trigger "Apply" button for non-reactive property panes

[randompixel]

I've followed this documentation through, but the property pane is non-reactive. When you change the drop-down item the Apply button doesn't become enabled.

Piecing together other bits of bug reports, it seems the main component needs a render signature that has a changeCallback function, but this is incompatible with the Interfaces defined in this documentation.

It would be good if this documentation covered both reactive and non-reactive property panes.

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 1c1d71f2-3508-56e2-6ea7-461591498d19
• Version Independent ID: 0546c161-74c4-fb37-ce89-f7cf0e49cf91
• Content: Build custom controls for the property pane
• Content Source: docs/spfx/web-parts/guidance/build-custom-property-pane-controls.md
• Product: sharepoint
• GitHub Login: @spdevdocs
• Microsoft Alias: spdevdocs

[TheMiao]

@randompixel David

Could you zip your project and sent to me pls?

I would like test your project from my end.

[randompixel]

@TheMiao I can't I'm afraid to the whole thing - working under confidentiality for a client. However, I can share the controls folder as it is basically the tutorial but renamed - nothing confidential in there.

controls.zip

In the main webpart file I have:

protected get disableReactivePropertyChanges(): boolean {
    return true;
}

protected onAfterPropertyPaneChangesApplied(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
    this.render();
  }

/**
   * Handle event for dynamic property pane field
   * @param propertyPath 
   * @param newValue
   */
  private onReportSelectorChange(propertyPath: string, newValue: any): void {
    const oldValue: any = get(this.properties, propertyPath);
    // store new value in web part properties
    update(this.properties, propertyPath, (): any => { return newValue; });
  }

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                new PropertyPaneAsyncReportSelector('reportId', {
                    label: strings.ReportNameLabel,
                    loadOptions: this.loadAvailableReports.bind(this),
                    onPropertyChange: this.onReportSelectorChange.bind(this),
                    selectedKey: this.properties.reportId
                }),
                PropertyPaneTextField('limitToRoles', {
                  label: strings.LimitToRolesLabel,
                  description: strings.LimitToRolesDescription,
                }),
              ]
            },
.... // more properties
}

private loadAvailableReports(): Promise<IDropdownOption[]> {
    return new Promise<IDropdownOption[]>((resolve: (options: IDropdownOption[]) => void, reject: (error: any) => void) => {
        // XMLHTTPRequest to get options from API.
  }
}

[TheMiao]

@randompixel David

I've tested from my end.
It seems like the apply button (disableReactivePropertyChanges) will only handle textbox's changes.

I guess this is by design.

If you add a textbox into custom panel, and make some changes, apply button will become clickable.

[randompixel]

Yes, it's a workaround in that our users can edit a different field. But it's still a workaround. The only stuff on the web I could find was to do with this #356 but I could work out how to tie up the different method signatures added in that issue with the above documentation.

[MayurSorthiya]

@randompixel David
how to implement custom property control with angular 2+?

[andrewconnell]

@MayurSorthiya This question is unrelated to this issue thread. Please don't hijack existing issues like this, please create new issues for new topics.

[andrewconnell]

@randompixel & @TheMiao I'm following up on old & still open issues...

Can you clarify what you're saying, that the property pane, when set to non-reactive mode, will only display the Apply button when the textbox is dirty, not when other controls are dirty?

Also, can you verify which environment & SPFx version you tested this with?