Default Dropdown Option PropertyPaneDropdown SelectedKey Not Working

Question

I'm working with the RC0 version of spfx and am having trouble selecting a default dropdown option.

I'm using the selectedKey property that I found in the documentation here. I have used both text and integer keys.

  PropertyPaneDropdown('test2', {
            label: 'Dropdown',
            options: [
              { key: '1', text: 'One'},
              { key: '2', text: 'Two' },
              { key: '3', text: 'Three' },
              { key: '4', text: 'Four'}
            ],
            selectedKey: '4',
        })

When I inspect the react state and props on initial render here is what I get. Notice selectedKey is not present.

After I select an option selectedKey and selectedIndex appear and are changed respectively.

EDIT FYI

I also tried the method that Chris O'Brian used here that involves setting the default like so...

PropertyPaneDropdown('dropdownProperty', { 
              label: 'This is the label', 
              isDisabled: false, 
              options: [ 
                { key: 'Red', text: 'Red' }, 
                { key: 'Green', text: 'Green' }, 
                { key: 'DarkBlue', text: 'Dark blue', **isSelected: true** } 
              ] 
            })

This method wouldn't even transpile the typescript.

Answer 1

You are absolutely correct - this is a bug. The problem is that the SelectedKey being passed in is currently being ignored, and instead the control is looking for the key with the value of the control property (this.properties.dropdownProperty in your case)

As a workaround, what you could do something like

if ( !this.properties.test2)
{
    this.properties.test2= '4';
}

I've added an issue here to track this - https://github.com/SharePoint/sp-dev-docs/issues/366 Thanks.

Answer 2

Navigate to your manifest.json for your clientside webpart under preconfiguredEntires --> properties, add your PropertyPaneControl Name with the default property value "properties": { "test2": "4" }