Close propertyPane in sharepoint framework

Question

I'm using the following command to open my propertyPane in SharePoint Framework.

this.context.propertyPane.open();

But there is sadly no close() option, so is there another way to close/hide the propertyPane again?

Answer 1

Yeah, no good option available right now to close the property pane via API.

But then you can use document.querySelector to find the close button element and then programmatically trigger the click event.

You can modify from below sample code:

if(this.context.propertyPane.isPropertyPaneOpen()){
  var element = document.querySelector("button[class*='propertyPaneClose_']") as HTMLButtonElement;
  if(element != null){
    element.click();
  }  
}

Have used it in the onPropertyPaneFieldChanged to check whether a particular property was set to the value and based on that i triggered the property pane close event like below. Here, I am checking whether the description property equals Hi and if that's the case, i check if the property pane is open and then i close the property pane :

protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
    if (propertyPath === 'description' && newValue) {
      if(newValue == "Hi"){
        this.properties.description = newValue;        

        if(this.context.propertyPane.isPropertyPaneOpen()){
          var element = document.querySelector("button[class*='propertyPaneClose_']") as HTMLButtonElement;
          if(element !=null){
            element.click();
          }          
        }
      }      
    }
}

Would ideally like to have the close method available via SPFx but since this is not yet available, you can use this workaround.

Update

As Vardhaman mentioned in comments, looks like they have added the close method in the later versions. You can use it as:

this.context.propertyPane.close();