mgt-people-picker protected render override

[ITAndy23]

Discussed in https://github.com/microsoftgraph/microsoft-graph-toolkit/discussions/2682

^{Originally posted by **ITAndy23** August 24, 2023} Hi, I'm currently using mgt-people-picker from version of mgt: ``` "@microsoft/mgt-element": "^2.8.0", "@microsoft/mgt-react": "^2.9.0", "@microsoft/mgt-teamsfx-provider": "^2.9.0", ``` We have a use case where we need to customize/hide the selected people, including the X that removes the person. Essentially leaving the selection empty all the time and using the onChange to capture the people and display elsewhere. I found this section on overriding protected renders: https://learn.microsoft.com/en-us/graph/toolkit/components/people-picker#extend-for-more-control But there's no documentation on how to use it, particularly in a react typescript setup? I would think overriding **renderSelectedPeople** should do the trick. Any advice on how to use them or go another route to hide a piece of the component, such as the selected people? Thanks

[Mnickii]

Thank you @ITAndy23 for this issue. Using the selected-person template `

would solve this partially, with the exception of the remove icon. Two ways I think of solving this would be to include ahide-selected-people` property or to include the button in the renderSelectedPerson method such that the selected-person template hides the remove icon too.

[gavinbarron]

Let's go with adding a hide-selected-people attribute. We will need to validate this UI change with our accessibility team.

@ITAndy23 this change will only be available in version 3.x of MGT and you'll need to update to use this in your project.

[gavinbarron]

Oh @ITAndy23 I should call out that when using the React wrapper there is no opportunity to override the render methods. Doing this requires that you create your own web component where the component class extends from the MgtPeoplePickerClass. The React components are smart wrapper controls that render the web components and pass data to them. The React components use encapsulation and not inheritance.

[ITAndy23]

@gavinbarron Do you have any examples for extending from the MgtPeoplePickerClass for this use case? Or will this be too much work?

[gavinbarron]

Not that class specifically, but there are examples for mgt-person and mgt-agenda

[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!