PropertyPaneCheckbox default state issue

%3CLINGO-SUB%20id%3D%22lingo-sub-75946%22%20slang%3D%22en-US%22%3EPropertyPaneCheckbox%20default%20state%20issue%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-75946%22%20slang%3D%22en-US%22%3E%3CP%3EWhen%20creating%20a%20check%20box%20in%20the%20property%20pane%20for%20my%20web%20part%2C%20I%20am%20setting%20the%20'checked'%20property%20to%20'true'%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20447px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F15507iE3B5A547B2A8C56A%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22PPC-Code.JPG%22%20title%3D%22PPC-Code.JPG%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EPropertyPaneCheckbox%20Code%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EBut%20when%20I%20run%20the%20web%20part%20in%20the%20SPO%20workbench%20and%20examine%20the%20property%20pane%2C%20the%20control%20is%20there%20but%20not%20checked%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20342px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F15508iB9BDA2AAAACBA987%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22PPC-Display.JPG%22%20title%3D%22PPC-Display.JPG%22%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-caption%22%20onclick%3D%22event.preventDefault()%3B%22%3EPropertyPaneCheckbox%20Display%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EHas%20anyone%20else%20run%20into%20this%20issue%3F%20%26nbsp%3BIs%20there%20something%20I%20have%20or%20haven't%20done%20that%20might%20be%20causing%20this%20to%20behave%20this%20way%3F%20%26nbsp%3BAny%20advice%20would%20be%20helpful%2C%20%3CEM%3EI%20really%20need%20to%20get%20this%20web%20part%20to%20start%20it's%20life%20on%20the%20page%20with%20the%20property%20pane%20check%20box%20in%20a%20checked%20state.%3C%2FEM%3E%20%26nbsp%3BThanks.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-76507%22%20slang%3D%22en-US%22%3ERe%3A%20PropertyPaneCheckbox%20default%20state%20issue%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-76507%22%20slang%3D%22en-US%22%3E%3CP%3EWhile%20no%20one%20seems%20to%20know%20why%20this%20isn't%20working%2C%20I%20found%20a%20workaround%20for%20my%20particular%20situation.%20%26nbsp%3BSince%20I%20am%20using%20the%20onPropertyPaneConfigurationStart()%20method%20to%20fill%20the%20items%20into%20the%20pulldown%20menu%20of%20list%20names%2C%20I%20put%20an%20extra%20line%20of%20code%20in%20that%20method%20that%20sets%20the%20property%20to%20%22true%22%20before%20I%20call%26nbsp%3B%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Econtext%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EpropertyPane%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Erefresh%3C%2FSPAN%3E%3CSPAN%3E().%3C%2FSPAN%3E%3C%2FP%3E%3CDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CPRE%3E%20%20%20%20%2F%2F---%20enable%20the%20menu%0A%20%20%20%20this.listsDropdownDisabled%20%3D%20false%3B%0A%20%20%20%20this.properties.filterHidden%20%3D%20true%3B%0A%0A%20%20%20%20%2F%2F---%20re-render%20the%20property%20pane%20to%20show%20the%20menu%20with%20items%0A%20%20%20%20this.context.propertyPane.refresh()%3B%3C%2FPRE%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3ESince%20I%20know%20that%20this%20method%20contains%20code%20that%20will%20only%20execute%20if%20the%20length%20of%20the%20list%20of%20items%20is%200%2C%20I%20know%20that%20it%20will%20only%20set%20to%20%22true%22%20the%20first%20time%20the%20property%20pane%20is%20opened%20by%20the%20user.%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EWhile%20this%20fixes%20my%20problem%20for%20this%20web%20part%2C%20the%20problem%20of%20the%20default%20value%20set%20in%20the%20code%20not%20being%20reflected%20in%20the%20UI%20remains.%20%26nbsp%3BUltimately%20this%20needs%20to%20be%20addressed.%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1348940%22%20slang%3D%22en-US%22%3ERe%3A%20PropertyPaneCheckbox%20default%20state%20issue%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1348940%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F35575%22%20target%3D%22_blank%22%3E%40Joseph%20Ackerman%3C%2FA%3E%26nbsp%3B%20Nearly%203%20years%20on%20and%20I%20don't%20think%20this%20issue%20has%20been%20resolved%20as%20it%20(or%20something%20very%20like%20it)%20occurred%20for%20me%20today.%26nbsp%3B%20I%20was%20expecting%20the%20checkbox%20to%20be%20checked%20based%20on%20the%20default%20property%20value%20set%20in%20the%20manifest.json%20file%20but%20it%20seems%20that%20this%20default%20value%20is%20not%20picked%20up%20on%20first%20load.%26nbsp%3B%20This%20is%20not%20a%20problem%20if%20you%20want%20the%20control%20to%20be%20unchecked%20by%20default%20but%20it%20is%20an%20issue%20if%20you%20want%20it%20the%20other%20way%20round.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20way%20I%20solved%20it%20was%20to%20set%20the%20default%20value%20as%20true%20in%20the%20onInit%20override.%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%20protected%20onInit()%3A%20Promise%3CVOID%3E%20%7B%0A%20%20%20return%20super.onInit().then(_%20%3D%26gt%3B%20%7B%20%0A%20%20%20%20%20this.properties.my_bool_property%20%3D%20true%3B%20%20%20%20%20%20%20%0A%20%20%20%7D)%3B%0A%7D%3C%2FVOID%3E%3C%2FCODE%3E%3C%2FPRE%3E%3CDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3EStill%2C%20I%20think%20it%20is%20a%20bug%20and%20totally%20agree%20that%20it%20should%20be%20fixed.%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E
Contributor

When creating a check box in the property pane for my web part, I am setting the 'checked' property to 'true':

 

PropertyPaneCheckbox CodePropertyPaneCheckbox Code

But when I run the web part in the SPO workbench and examine the property pane, the control is there but not checked:

 

PropertyPaneCheckbox DisplayPropertyPaneCheckbox Display

Has anyone else run into this issue?  Is there something I have or haven't done that might be causing this to behave this way?  Any advice would be helpful, I really need to get this web part to start it's life on the page with the property pane check box in a checked state.  Thanks.

2 Replies

While no one seems to know why this isn't working, I found a workaround for my particular situation.  Since I am using the onPropertyPaneConfigurationStart() method to fill the items into the pulldown menu of list names, I put an extra line of code in that method that sets the property to "true" before I call this.context.propertyPane.refresh().

 
    //--- enable the menu
    this.listsDropdownDisabled = false;
    this.properties.filterHidden = true;

    //--- re-render the property pane to show the menu with items
    this.context.propertyPane.refresh();
 
Since I know that this method contains code that will only execute if the length of the list of items is 0, I know that it will only set to "true" the first time the property pane is opened by the user.
 
While this fixes my problem for this web part, the problem of the default value set in the code not being reflected in the UI remains.  Ultimately this needs to be addressed.

@Joseph Ackerman  Nearly 3 years on and I don't think this issue has been resolved as it (or something very like it) occurred for me today.  I was expecting the checkbox to be checked based on the default property value set in the manifest.json file but it seems that this default value is not picked up on first load.  This is not a problem if you want the control to be unchecked by default but it is an issue if you want it the other way round.

 

The way I solved it was to set the default value as true in the onInit override.

 protected onInit(): Promise<void> {
   return super.onInit().then(_ => { 
     this.properties.my_bool_property = true;       
   });
}
 
Still, I think it is a bug and totally agree that it should be fixed.