How to correctly reset mgt-people-picker in JavaScript

Question

I am using Microsoft Graph Toolkit's people-picker, and it configures to allow only one selection. I have a need to clear the people-picker's selected person through JavaScript on modal open.

I tried resetting selectedPeople property with an empty array. By doing this, it clears the selected person, but the textbox remains in disabled state. What is the correct way to clear the selected person and still enable the textbox?

<mgt-people-picker selection-mode="single" data-contact-people="cio">
    <template data-type="selected-person">
        <mgt-person person-query="{{person.userPrincipalName}}" view="oneLine"></mgt-person>
    </template>
    <template data-type="person">
        <mgt-person person-query="{{person.userPrincipalName}}" view="twoLines"></mgt-person>
    </template>
</mgt-people-picker>

// clear all people picker inputs
document.querySelectorAll('mgt-people-picker').forEach((element) => {
    element.selectedPeople = [];
});

error screenshot

Answer 1

I solved the issue by adding this line of code after resetting selectedPeople property.

element.selectedPeople = [];
element.input.shadowRoot.querySelector('input').removeAttribute('disabled');