There are important files that Microsoft projects should all have that are not present in this repository. A pull request has been opened to add the missing file(s). When the pr is merged this issue will be closed automatically.

Microsoft teams can learn more about this effort and share feedback within the open source guidance available internally.

Merge this pull request

Two Property is added under the interface.

export interface ISpFxProPaneWebPartProps {
description: string;
myContinent: string;
numContinetVisited: number;
}

While run gulp server - I am getting Error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'. please refer the below screenshot.

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

When I tried to run the webpart project sample for 'custom property pane field using React & Fluent UI' (folder: 02-custom-fields), gulp serve completed successfully but the webpart is not getting loaded to page. Getting the below error.

I haven't made any changes to the project. Just did npm install on the project folder and tried to gulp serve the webpart.

Unable to build the project due to the following import errors.

[12:27:29] Error - [tsc] src/controls/PropertyPaneContinentSelector/PropertyPaneContentSelector.ts(14,8): error TS2306: File '.../HelloWorldWP-new/src/controls/PropertyPaneContinentSelector/index.ts' is not a module.
[12:27:29] Error - [tsc] src/webparts/helloWorld/HelloWorldWebPart.ts(22,8): error TS2306: File '.../HelloWorldWP-new/src/controls/PropertyPaneContinentSelector/index.ts' is not a module.
[12:27:29] Error - 'tsc' sub task errored after 5.74 s
exited with code 2

Note that when hovering over the import path './' the word 'index' is appended.

I've noticed a new bug in a web part we have, can anyone confirm and advise if it is occurring to them as well? I'm trying to rule out a bug in our code.

Using SPFx 1.8.2 on SharePoint Online.

Scenario is pretty straight forward: a web part property that is updated using a custom designer (not in the built in property pane).

The property value is set using this code:

  private setPropertiesValue(propertyPath: string, newValue: any, skipRender: boolean = false) {
    const oldValue: any = get(this.properties, propertyPath);
    update(this.properties, propertyPath, () => newValue);
    if (skipRender !== true)
      this.render();
  }

the property value is a complex object ( not a string, something like {title:"hello", description:"welcome!"} )

Observed behavior

The bug we are noticing is this:

1. add the web part to the page, using setPropertiesValue set this.properties.prop1 = {title: "hello v1"}
2. Save, publish, refresh - works as expected
3. edit the page, change the property using setPropertiesValue set this.properties.prop1 = {title: "hello v2"}
4. Click discard changes
5. The web part will display "hello v2" until the user refresh the page, then "hello v1" will be displayed

In edit mode, the webpart just renders 2 textboxes into its content and calling setPropertiesValue when the user changes their value.

Important to note

When clicking discard, the constructor is called followed by OnInit.
Checking this.properites during OnInit will show this.properties.prop1.title = "hello v2" which is the incorrect value, since the user discarded this change.

Expected behavior

after clicking discard on the page I expected OnInit to be called with this.properties.prop1.title = "hello v1"

Any help, or confirmation if this issue happens/doesn't happen to you as well would be very helpful!
I was able to see this issue in several web parts, but some OOB web parts do not have this bug.

Thanks!