People Picker inside Dialog

[cwdata]

Category

[ ] Enhancement
[ ] Bug
[X] Question

Version

Please specify what version of the library you are using: [ 1.11.0 ]

Expected / Desired Behavior / Question

When using a people picker inside a SPFx Dialog the control only accepts input after the second mouse click. This is a known bug in Office UI fabric version 5. It has been fixed in version 6.143.0 (Ref: microsoft/fluentui#7992)
So we upgraded other projects to version 6 and the problem is indeed solved. But what can we do when using the reusable controls? Upgrading UI fabric seems not to be an option here. What do others do when using the picker inside of a dialog? Is there maybe a special version of UI fabric 5 that has this issue fixed?

Steps to Reproduce

Place a people picker inside a dialog -> Open the dialog and click on the picker. It doesn't respond to the first click, only when you click it for the second time or click somewhere else inside the dialog before clicking the picker.

[JEEVANJGA]

Category
[ ] Enhancement
[ X ] Bug
[ ] Question

Version
Please specify what version of the library you are using: [ 1.12.1 ]
"@material-ui/core": "^4.11.1",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.56",
"@microsoft/sp-core-library": "1.12.1",
"@microsoft/sp-lodash-subset": "1.12.1",
"@microsoft/sp-office-ui-fabric-core": "1.12.1",
"@microsoft/sp-property-pane": "1.12.1",
"@microsoft/sp-webpart-base": "1.12.1",
"@pnp/spfx-controls-react": "^2.8.0",
"office-ui-fabric-react": "^7.173.1"

Expected / Desired Behavior / Question

When using a people picker inside a SPFx Dialog the control only accepts the first suggested user even if a different user is selected.
Consider 5 users are suggested on search and am clicking 3rd user from the suggestion list options. On select change event selected user is the 1st one from the suggestions list options.
Expected behavior is to select the 3rd user instead of 1st user on clicking the 3rd user from the suggestions list options, when this control is used within a material UI Dialog.

Steps to Reproduce

Place a people picker inside a dialog -> Open the dialog and click on the picker. enter text to search user. click on user from the list options (not the 1st suggested user). on selection change, irrespective of selected user the 1st user from the suggestion list options will be selected.

[michaelmaillot]

Hi @cwdata,

Based on latest version of the Controls (3.15.0), it works now (both first focus and selecting any name in the suggestion list).

Can you try on your side and tell me if it works for you?

[michaelmaillot]

Hi @JEEVANJGA,

If it's not already the case, I think it would be better to separate @cwdata issue from yours by creating a new one dedicated to your problem 🙂

Just to be sure: did you have the opportunity to try again with latest version of the Controls? I'm not familiar with Material UI but as the Controls are strongly relying on Fluent UI (Office UI Fabric new name), I'm not super confident about its compatibility with the library you're refering to.

[cwdata]

Hi @michaelmaillot,
thanks for investigating this. As we needed a solution back in 2019 we built our own people picker control based on the newer version of UI fabric. Therefore I can't try if this would now be working in our solution but I'm confident that it will work :-)
Closing this issue now.