ModernTaxonomyPicker - allowMultipleSelections = false, but panel allows multiple items to be selected

[roldengarm]

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

Please specify what version of the library you are using: 3.18.1

If you are not using the latest release, please update and see if the issue is resolved before submitting an issue.

Expected / Desired Behavior / Question

When allowMultipleSelections is false, I shouldn't be able to select more than one item in the tree view.

Observed Behavior

Multiple items can be selected in the tree view in the panel. It still only allows selecting one item in the picker itself, but the treeview should not allow multiple selections.

Steps to Reproduce

<ModernTaxonomyPicker
                allowMultipleSelections={false}
                termSetId={this.state.businessGroupTermSetId}
                panelTitle="Select Business Group"
                label="Business Group or Unit"
                context={this.props.context}
              />

Then, just click the Label button to open the panel and try to select more than one.

A change in onPickerChange is most likely required to only select one item when allowMultipleSelections is false: https://github.com/pnp/sp-dev-fx-controls-react/blob/master/src/controls/modernTaxonomyPicker/taxonomyPanelContents/TaxonomyPanelContents.tsx#L66

[github-actions]

Thank you for submitting your first issue to this project.

[NishkalankBezawada]

Hello @roldengarm,

Did you try checking with the latest version v3.19?

Also, as per the documentation, you can try like this incase if you dont want multi-selection

I have tried like below, and it works fine

        <div id="taxPickerDiv">
          <ModernTaxonomyPicker
            termSetId={"9b18fd02-e738-41c7-b648-ea26a891267f"}
            panelTitle="Taxonomy Picker"
            label={"Taxonomy Picker"}
            context={this.props.context}
            required={false}
            disabled={false}
            customPanelWidth={400}
          />
        </div>

I have removed allowMultipleSelections, as this property is not required, and the default value is false.

If I have your approach, I am able to select multiple values in the panel, which is not correct. I will come up with a solution for this. Mean while you can remove the property allowMultipleSelections={false} to make it work.

Thanks,
Nishkalank Bezawada

[ludes2]

@roldengarm I have exactly the same problem.
i am using v3.17 and have tried v3.19 and the bug persists.
Also, i tried to not set explicitly the prop allowMultipleSelections, but this has no effect.
there seems to be a problem with the is-checked class which does not get removed by clicking on an other option

Did you found a solution in the meantime?

[roldengarm]

@ludes2 no solution unfortunately.

[lucadercoli]

I'm facing the same issue and tried the solution proposed by @NishkalankBezawada,
but as mentioned by @Ludes, the bug still persists.
I also tried using the beta version, but it doesn't work either.

Has anyone else found an alternative solution that works?

[NishkalankBezawada]

I'm facing the same issue and tried the solution proposed by @NishkalankBezawada,

but as mentioned by @Ludes, the bug still persists.

I also tried using the beta version, but it doesn't work either.

Has anyone else found an alternative solution that works?

Hey @lucadercoli, couldn't get you clearly, did my solution work?

//Nishkalank

[lucadercoli]

Hi @NishkalankBezawada, thank you for your suggestion. Unfortunately, after trying your proposed solution, the bug is still present. I also tried the beta version, but it didn't resolve the issue either. Could you suggest any other possible fixes? Has anyone else found an alternative solution that worked?

[ludes2]

Any news on this issue?

[ferrarirosso]

@joelfmrodrigues Assign this issue to me, i will fix it

[ferrarirosso]

@joelfmrodrigues done
I have created two codepens to better analyze the problem :
Example with multiple selections allowed
Example with fix for selectedKey and state

The problem was probably related the undefined value which is handled differently from React

[joelfmrodrigues]

Hey @roldengarm, @ludes2, @lucadercoli, the PR from @ferrarirosso to address this issue has just been merged. If you have the chance to test the beta release, please let us know if this issue has been fixed.

[ferrarirosso]

@joelfmrodrigues tested with 3.21.0-beta.1239409 in our spfx component, works perfectly
btw @ludes2 is in my team, i got the task :-)