PeoplePicker Freezes When Typing In Search Values

[Arknev]

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

Please specify what version of the library you are using: [@pnp/spfx-controls-react@1.7.0]

Expected / Desired Behavior / Question

Clicking in then typing a name (minimum 3 characters) in the PeoplePicker (PP) would return suggestions for selection.

Observed Behavior

When clicking in the PP field, I'm getting this message in the console (Chrome):
(5) PersonaBase property 'primaryText' was used but has been deprecated. Use 'text' instead.

When I type in the field I get the same message in the console and the UI becomes unresponsive:
(6319) PersonaBase property 'primaryText' was used but has been deprecated. Use 'text' instead.

After a minute or two the UI becomes responsive again and suggestions are rendered.

While suggestions are being loaded, these errors are shown in the console for a significant percentage of users:
GetPersonaPhoto:1 GET https://outlook.office365.com/owa/service.svc/s/GetPersonaPhoto?email=_USER@SP.COM_&UA=0&size=HR96x96 500 (Internal Server Error. See fault object for more information.)

Note: Pasting in names or email address works as expected.

Steps to Reproduce

My versions
+-- @microsoft/sp-build-web@1.4.1
+-- @microsoft/sp-core-library@1.4.1
+-- @microsoft/sp-lodash-subset@1.4.1
+-- @microsoft/sp-module-interfaces@1.4.1
+-- @microsoft/sp-office-ui-fabric-core@1.4.1
+-- @microsoft/sp-page-context@1.5.1
+-- @microsoft/sp-webpart-base@1.4.1
+-- @microsoft/sp-webpart-workbench@1.4.1
+-- @pnp/common@1.1.4
+-- @pnp/graph@1.1.4
+-- @pnp/logging@1.1.4
+-- @pnp/odata@1.1.4
+-- @pnp/sp@1.1.4
+-- @pnp/spfx-controls-react@1.7.0
+-- @types/chai@3.5.2
+-- @types/mocha@2.2.48
+-- @types/react@15.6.6
+-- @types/react-dom@15.5.6
+-- @types/webpack-env@1.13.6
+-- ajv@5.2.5
+-- gulp@3.9.1
+-- npm@6.4.0
+-- office-ui-fabric-react@5.122.1
+-- react@15.6.2
+-- react-dom@15.6.2
`-- sp-pnp-js@3.0.10

I was using version 1.6. Then I did an update in response to issue #95. When deploying the updated WebPart the issues became apparent.

The long delay and frozen display makes the field appear to be broken. Pasting in a name as short as "Mark" returns responses very quickly. Typing "Mark" will eventually work but you can't see the text as it is being typed.

This is my call to the PeoplePicker:
<PeoplePicker context={this.props.WpContext} titleText="Add New User" personSelectionLimit={1} groupName={''} showtooltip={false} isRequired={false} disabled={false} selectedItems={this._getPeoplePickerItems} />
When I view the WebPart in EDGE the tab becomes unresponsive, does not recover, and EDGE gives me the option stop a long running script.

[AsishP]

@Arknev, will test it and let you know. I kind of knew that primarytext is getting deprecated. Will have to update and check if anything else breaks.

[estruyf]

Thanks @Arknev for reporting this. Until now, we didn't have a version dependency on Office UI Fabric. As the library properties are changed so often, I had to add a version dependency to the project. As of version 1.8.0 of this library, the project will use ^5.122.0 of office-ui-fabric-react.

Updated the primaryText property to the new text property. Can you test out the latest beta of 1.8.0 to verify if this helps you solve your issue? More information about how you can test out a latest beta can be found here: https://sharepoint.github.io/sp-dev-fx-controls-react/beta/

[estruyf]

Closing the issue as version 1.8.0 has just been released.

[Arknev]

I combined two issues into one here. Although the primaryText issue was addressed, that issue was actually minor compared to the UI freezing when searching for users. In our tenant we have millions of users. It would be great if the "resolveDelay" property (IBasePickerProps) could be set when calling the PeoplePicker. I don't see a way to delay search until a minimum number of characters are entered, which would be best, but this time delay would likely meet our needs.