pnp / sp-dev-fx-property-controls

Reusable SPFx property pane controls - Open source initiative
https://pnp.github.io/sp-dev-fx-property-controls/
MIT License
236 stars 151 forks source link

PropertyFieldListPicker: List Picker control is not cleared properly when I pass it a variable with null value #520

Open mfdezvil opened 1 year ago

mfdezvil commented 1 year ago

Category

Version

Please specify what version of the library you are using: [ 3.11.0 ]

Expected / Desired Behavior / Question

In my Webpart Property Pane I have two controls:

When I select a site, and then select a list from this site, it works like a charm. If I unselect the site or selected new one, list value should been cleared because of the event onChange. However, despite of internal value of the list is cleared -I debugged the code and checked that list value is null-, the rendered value to show in the control is not cleared and in the list's dropdown appears a random selected value.

Observed Behavior

I have 2 controls in the property pane: a site picker and a list picker. Here is a screenshot with a site selected.

image

Then I select a list, works fine:

image

But if I remove the site, the list should be removed too... And it does internally (I check the list value is null), however the control shows like this, with a random list selected:

image

I add my code below for better clarity.

Steps to Reproduce

Here is my code, in the webpart property pane class:

/* OnChangeEvent from SitePicker */

private onSiteChange = (propertyPath: string, oldValue: IPropertyFieldSite[], newValue: IPropertyFieldSite[]): void => {
        this.properties.list = null;  /*Here is where I clear the list value, and internally this works fine... but despite of value is null, it continues show a random value in dropdown list selection */
        this.properties.site = newValue;
        this.context.propertyPane.refresh();
    };

return {
            pages: [
                {
                    groups: [
                        {
                            groupFields:  [
                                    PropertyFieldSitePicker('site', {
                                        label: "Select source site collection",
                                        initialSites: this.properties.site, /* Initial value: null */
                                        context: this.context,  /* Webpart context */
                                        deferredValidationTime: 500,
                                        multiSelect: false,
                                        onPropertyChange: this.onSiteChange,
                                        properties: this.properties,
                                        key: 'sitesPickerFieldId'
                                    }),
                                    PropertyFieldListPicker('list', {
                                          label: "Select source list",
                                          selectedList: this.properties.list,
                                          includeHidden: false,
                                          multiSelect: false,
                                          orderBy: PropertyFieldListPickerOrderBy.Title,
                                          disabled: !this.properties.site,
                                          properties: this.properties,
                                          context: this.context,
                                          onGetErrorMessage: null,
                                          deferredValidationTime: 0,
                                          includeListTitleAndUrl: true,
                                          key: 'listPickerFieldId',
                                          webAbsoluteUrl: !this.properties.site ? this.properties.site[0].url : null
                                  })
                        }
                    ]
                }
            ]
        };

Thanks!

ghost commented 1 year ago

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.