Dropdown clearing but state remains after component update

Question

I've been following a few tutorials on creating a SPFX webpart form using fluent ui and React.

My webpart component is constructed as follows:

 constructor(props: IOrderingProps, wpState: ICurrentWpState) {
    super(props);
    // init the state properties
    this.state = {
      companyDropDownSelected: "",
      cart: null
    };

    this.showStateClicked = this.showStateClicked.bind(this);
    this.onCompanyChange = this.onCompanyChange.bind(this); 
}

My render:

    public render(): React.ReactElement<IOrderingProps> {
    return (

      <div className={styles.tpOrdering}>
        <div className={styles.container}>

          <Stack tokens={stackTokens}>
            <span className={styles.title}>{this.props.description}</span>
            <Dropdown
              placeholder="Select a company"
              label="Company"
              selectedKey={this.state.companyDropDownSelected}
              id="companyDdl"
              styles={dropdownStyles}
              options={this.props.companyOptions}
              onChange={this.onCompanyChange}
            />
            <PrimaryButton text="Show Comp state" onClick={this.showStateClicked} />                        
            <table id="example" className="display partsTable">
            </table>
          </Stack>

        </div>
      </div>
    );
  }

Note my selected key is stored in state. My onChange event for the dropdown:

public onCompanyChange = async (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): Promise<void> => {    
    const selectedKey: string = item ? (item.key as string) : "";
    this.setState({ companyDropDownSelected: selectedKey });
    this.fetchParts();
  }

This all works fine. However, if I update any value in the WebPart property pane, I want the dropdown to retain it's selected value. Currently it triggers a componentDidUpdate and clears the dropdown even though the the state remains. How do I reset the dropdown to it's existing selected key state?

My componentDidUpdate implementation:

public componentDidUpdate(prevProps: IOrderingProps, prevState: ICurrentWpState, prevContext: any): void {
    // re-execute if limit has changed.
    if (this.props.limit !== prevProps.limit) {
      this.fetchParts();      
    }
  }

Even if I do nothing in componentDidUpdate it clears the dropdown, even thought the state for selected key still exists.

Hmm.. This looks fine to me (the "fetchParts" probably clears the dropdown items, and nobody clear the state)... What is your question? — Nikolay, Jun 24 '21 at 23:24
Have you tried to use dropdown property defualtselectedkey? in case the state is not "" put there state. — Matej, Jun 25 '21 at 07:21
@Nikolay as I mentioned, the dropdown clears even with fetchParts commented out. I believe it's clearing because componentUpdate is firing triggered by changing values in the property pane. The question is how do I set the dropdown back after componentUpdate when the selected key is already still set to what it was. — Jason Eades, Jun 25 '21 at 14:40
@JasonEades just to be sure if it helps - have you tried property defaultselectedkey as I mentioned earlier? — Matej, Jun 29 '21 at 10:57
@Matej thank you, I did try that but it ended up being an unrelated async/await issue on my end. — Jason Eades, Jun 29 '21 at 11:29

score 0 · Accepted Answer · answered Jun 29 '21 at 11:27

This ended up being an async/await problem and not a state or control issue. The problem was the companyOptions stored in the properties is being passed into the component from the webpart. They are being created via an async call to an API.

const element: React.ReactElement<IOrderingProps> = React.createElement(
  Ordering,
  {
    description: this.properties.description,
    context: this.context,
    limit: this.properties.limit,
    msalInstance: this.msalConfig,
    companyOptions: await this.getCompanyOptions()
    
  }
);

The fetch and token calls inside this.getCompanyOptions() weren't properly awaited. Thus, the dropdown selected key was trying to be reset on componentUpdate when companyOptions was still null.

<Dropdown
    placeholder="Select a company"
        label="Company"
        selectedKey={this.state.companyDropDownSelected}
        id="companyDdl"
        styles={dropdownStyles}
        options={this.props.companyOptions}
        onChange={this.onCompanyChange}
        />

This is working as expected now that there are valid options when the component updates.

Dropdown clearing but state remains after component update

1 Answers1