[BUG] userFilters property causes component to misbehave

[ITAndy23]

Describe the bug I'm having an issue when i add this property userFilters="userType ne 'Guest' AND accountEnabled eq true" to <PeoplePicker> :

1. When i click into the control, top 6 are not showing up. I have to start typing for search and results to appear
2. Inserting a person as the component loads no longer works using defaultSelectedUserIds={[context?.user?.id!]}
3. After searching for a name, click on a user from the results, the users do not append into the people picker's input field. This makes the component non-usable

If remove the userFilters property, all of the above works however, i lose filtering guest accounts and disabled accounts.

To Reproduce Steps to reproduce the behavior: Add PeoplePicker with the userFilters property:

<PeoplePicker
                    aria-required
                    className="mgt-light teamsui flexFullWidth"
                    type={PersonType.person}
                    userType={UserType.user}
                    defaultSelectedUserIds={[context?.user?.userPrincipalName!]}
                    userFilters="userType ne 'Guest' AND accountEnabled eq true"
                  ></PeoplePicker>

Expected behavior Expect the component to behave as expected and not have the issues indicated above. Expect filters to work as designed while the component should work as designed as well

Environment (please complete the following information): Windows 11 Edge & Chrome

     "react": "^17.0.2",
    "react-dom": "^17.0.2",

Microsoft Teams Using these packages:

     "@fluentui/react-components": "^9.27.1",
    "@fluentui/react-hooks": "^8.6.14",
    "@fluentui/react-northstar": "^0.66.5",
    "@microsoft/mgt": "^3.1.0",
    "@microsoft/mgt-react": "^3.1.0",
    "@microsoft/mgt-teamsfx-provider": "^3.1.0",
    "@microsoft/microsoft-graph-client": "^3.0.1",
    "@microsoft/teamsfx-react": "^3.0.1",

Additional context Previous issue: https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/2602

[sebastienlevert]

Thanks for this issue. Can you provide a sample repro? There are a couple of potential issues and we'd love to get to the bottom of it.

1. This is due to the fact you are using type="person". This will restrict the API to only /users, therefore disabling the zero keyword query loading the top 6.
2. I can't reproduce with my test in our playground. Could it be a render issue when state changes in your React component?
3. I can't reproduce with my test in our playground. Could it be a render issue when state changes in your React component?

[ITAndy23]

@sebastienlevert Is there a playground where I can reproduce the react components?

In the meantime, i was able to have it working similar to your code. However, when i add the onchange event for selectionChanged , that's where it breaks. I moved the component to the top of a file and removed all useEffects. So component looks like this:

      <PeoplePicker
        aria-required
        style={{ width: '75%' }}
        selectionChanged={peoplePickerOnSelectionChange}
        className="mgt-light teamsui"
        type={PersonType.person}
        userType={UserType.user}
        userFilters="userType ne 'Guest' AND accountEnabled eq true"
      />

The onchange:

  const peoplePickerOnSelectionChange = (
    event: CustomEvent<IDynamicPerson[]>,
  ) => {
    // setMembers([...event.detail, members]);
    setMembers(event.detail);
  };

This does filter out the guest and disabled accounts. However, selections don't stay populated. I can see event.detail has value: However, after it never shows in the selection area. If i try selecting someone else, the array is still 1.

[gavinbarron]

@ITAndy23 we don't have a playground for React stuff at present. Our approach in the past has been to use StackBlitz, but they have made changes so that es modules are not being built correctly. We're working through some changes to unlock either StackBlitz or CodeSandbox as an option for reproducing/playground like behavior.

[sebastienlevert]

At the moment, this is not something we're likely to prioritize. That being said, the Graph Toolkit is an open source project and we'll be happy to support and review if you want to contribute to its codebase! In the meantime, we will be closing this issue. Thanks!