How to use TaxonomyPicker Control with Form Customizer?

Question

I am trying to customize form using SPFx Form Customizer solution. My form requires TaxonomyPicker control.

I am importing TaxanomyPicker and then trying to add control in render method.

<TaxonomyPicker allowMultipleSelections={true}
          initialValues={this.state.tags}
          termsetNameOrID="Department"
          panelTitle="Select Departments"
          label="Departments Picker"
          context={this.props.context}
          onChange={this.onMultySelectTaxPickerChange}
          isTermSetSelectable={false} />

In the above code, the context control is expecting BaseComponentContext but I am getting FormCustomizerContext from props.

How to resolve this issue?

Is there any way to convert FormCustomizerContext to BaseComponentContext?

Or how to create/get BaseComponentContext value?

Please help.

Answer 1

This is a common problem when using the PnP React Controls in a Form Customizer Extension. To address the type mismatch, you can cast the FormCustomizerContext as any.

context={this.props.context as any}