Custom Continent Selector Component returns blank when changed - fix proposed

[NoralK]

I was watching the video here and I believe I have found a bug when creating the Custom Continent Selector Component.

When I started the project I did create my project from scratch, not from the repo. I believe the repo project was created with No framework. I created mine with React, then placed the code in appropriate spots to compensate. The first demo, without the Custom Component, worked without issue. However, at the end of the Custom Component demo everything seemed to work. However, when the Custom Component dropdown changed the value in the web part was blank.

After some troubleshooting I found, I believe, a bug in the .../src/controls/PropertyPaneContientSelector/components/ContinentSelector.tsx, specifically in the onChanged function:

  private onChanged(option: IDropdownOption, index?: number): void {
    this.selectedKey = option.key;
    const options: IDropdownOption[] = this.state.options;
    options.forEach((opt: IDropdownOption): void => {
      if (opt.key !== option.key) {
        opt.selected = false;
      }
    });
    this.setState((prevState: IContinentSelectorState, props: IContinentSelectorProps): IContinentSelectorState => {
      prevState.options = options;
      return prevState;
    });
    if (this.props.onChanged) {
      this.props.onChanged(option, index);
    }
  }

The last if statement is not reachable in any scenario, thus the component never updates - it should be:

    private onChanged(option: IDropdownOption, index?: number): void {
        this.selectedKey = option.key;
        const options: IDropdownOption[] = this.state.options;
        options.forEach((opt: IDropdownOption): void => {
            if(opt.key !== option.key) {
                opt.selected = false;
            }
        });
        if (this.props.onChanged) {
            this.props.onChanged(option, index);
        }
        this.setState((prevState: IContinentSelectorState, props: IContinentSelectorProps): IContinentSelectorState => {
            prevState.options = options;
            return prevState;
        });

    }

Once the if statement is moved then the if statement can be evaluated and onChanged can be fired resulting in the updating of the component.

Side note - I added Oceania and Europe to the continents :)

Cheers