3

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.

On initial render before I select an option

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

selectedKey shows up.

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.

1
  • Please note that the dropdown I have in the code is straight from the first demo. Jan 15, 2017 at 22:47

2 Answers 2

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.

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.