TaxonomyPicker continuously shows spinner instead of suggestion when typing and throw error in console

[kuralew]

Category

[ ] Enhancement

[ x] Bug

[x ] Question

Version

Please specify what version of the library you are using: 3.16.2. In addition, if helps, am using
"@microsoft/sp-core-library": "1.17.4", "@microsoft/sp-lodash-subset": "1.17.4", "@microsoft/sp-office-ui-fabric-core": "1.17.4", "@microsoft/sp-property-pane": "1.17.4", "@microsoft/sp-webpart-base": "1.17.4", "react": "17.0.1", "react-dom": "17.0.1"

Expected / Desired Behavior / Question

TermSetPicker - suggestions should list available suggestions under input element.
TermSet and TermSetItems are correctlly displayed in Panel. I can select

Observed Behavior

After typing to see suggestions, it throws an error in the console (for every key stroke)
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'length') at TermPicker.<anonymous> (TermPicker.js:201:1) at step (TermPicker.js:47:1) at Object.next (TermPicker.js:28:45) at fulfilled (TermPicker.js:19:42)

I must also mention that i started seeing this issue after I upgrade SharePoint Framework from 1.10.0 to 1.17.4

Steps to Reproduce

<TaxonomyPicker context={props.context} allowMultipleSelections={true} initialValues={props.value ? props.value : []} panelTitle='Select Term' termsetNameOrID={termSetId} onChange={props.onChange} label={props.label ? props.label : ''} isTermSetSelectable={false} />

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[github-actions]

Thank you for submitting your first issue to this project.

[NishkalankBezawada]

Hello @kuralew

I have tried to reproduce the issue, but wasnt able to.

Could you try this with beta version, npm install @pnp/spfx-controls-react@next --save and let us know the behaviour.

Thanks,
Nishkalank Bezawada

[kuralew]

@NishkalankBezawada I see the same issue with npm install @pnp/spfx-controls-react@next --save. However, V1.16.0 works.

[NishkalankBezawada]

Hello @kuralew

Can you check if you are passing the termsetid or term group id?

//Nishkalank

[kuralew]

@NishkalankBezawada sorry was away from work for couple of weeks. Yes I'm passing the termSetId as shown below. Just to clarify, the @pnp/spfx-controls-react": "^3.9.0 used to work with @microsoft/sp-core-library": "1.10.0 and react": "16.8.5. It stopped working with the above error when i upgraded to @microsoft/sp-core-library": "1.17.4 and react": "17.0.1. The code is the same. Only the libraries were upgraded. I would appreciate any direction.
<TaxonomyPicker context={props.context} allowMultipleSelections={props.multiple} initialValues={props.value ? props.value : []} panelTitle='Select Term' termsetNameOrID={termSetId} onChange={props.onChange} label={props.label ? props.label : ''} isTermSetSelectable={false} />

[michaelmaillot]

Hi @kuralew,

In order to better "catch" what's wrong in your context, I suggest you to clone the PnP Controls repo on your computer if possible, then follow the Minimal Path to Awesome, fill the required info in the ControlsTest webpart for the TaxonomyPicker and run the project locally.

Let us know if you found something that could explain why is it not working as expected.

[michaelmaillot]

Closing this as there's no feedback from issuer. Feel free to reopen it needed.