fix: enable the input control when selectedPeople is cleared via code.

[musale]

Closes #2683

PR Type

• Bugfix

Description of the changes

• Fire the selectionChanged custom event in the selectedPeople setter
• Handle disabling the input when setting the selectedPeople manually
• Style lint fixes for longhand property names error

PR checklist

• Project builds (yarn build) and changes have been tested in at least two supported browsers (Edge + non-Chromium based browser)
• All public APIs (classes, methods, etc) have been documented following the jsdoc syntax
• Stories have been added and existing stories have been tested
• Added appropriate documentation. Docs PR:

• License header has been added to all new source files (yarn setLicense)
• Contains NO breaking changes

Other information

[github-actions]

📖 The updated storybook is available here

[github-actions]

📖 The updated storybook is available here

[gavinbarron]

I think that we need to revised how we're setting disabled throughout this component and ensure that we're making use of reactive properties/state. Perhaps we have a separate @State textInputDisabled property of the class that is used to control the enabled/disabled state of the fluent-text-field.

The current approach feels wrong to me

[musale]

@gavinbarron I agree with the revision. There are two use cases for disabling a picker: when you want it disabled because say you've selected people already and don't want to add others and when you have single selection mode. For the first scenario, passing disable does it. However, if you look at the component, things like a placeholder text won't show. Which is ok. For the second scenario, we need the placeholder showing "max contacts added". That won't work using a "disabled" property at fluent-text-field level. That's why in setting it to disabled it's using the input element in the shadowRoot of fluent text field. I also agree that having the DOM manipulations is hacky and will grow in complexity if there is need for further disabled scenarios. Would it be better to work out a single disabled scenarios in a different issue?

[gavinbarron]

Thank you for reminding me of the limitation around the placeholder text. That ensures that we do need to use a DOM manipulation on the input inside the shadow DOM of the fluent-text-field.

I think we should take the opportunity to clean this up a bit though, we have two places where we enable and two places where we disable the input via dom manipulations.

I'd like us to have one method that we can call to enable the text box and one to call to disable it. e.g.

private disableTextInput() {
  const inputControl = this.input.shadowRoot.querySelector<HTMLInputElement>('input');
  inputControl?.setAttribute('disabled', 'true');
}

This way the code triggering the DOM manipulation doesn't need to know anything about the input it's working with, just to try and take a logical action.

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

📖 The updated storybook is available here

[github-actions]

📖 The updated storybook is available here

[musale]

@gavinbarron This is fine. In some instances, within these enable/disable scenarios, we've other actions like focus and setting values to empty applied. I think these are blanket actions without effect on a default behavior of a function standpoint.

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

📖 The updated storybook is available here

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

📖 The updated storybook is available here

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

📖 The updated storybook is available here

[github-actions]

🚀 New react-contoso sample application deployed here

[github-actions]

Package	Line Rate	Branch Rate	Complexity	Health
mgt-components.src.components	81%	100%	0	✔
mgt-components.src.components.mgt-contact	68%	83%	0	➖
mgt-components.src.components.mgt-file	51%	100%	0	➖
mgt-components.src.components.mgt-file-list	56%	100%	0	➖
mgt-components.src.components.mgt-file-list.mgt-file-upload	49%	88%	0	❌
mgt-components.src.components.mgt-messages	66%	100%	0	➖
mgt-components.src.components.mgt-organization	47%	100%	0	❌
mgt-components.src.components.mgt-person	79%	65%	0	✔
mgt-components.src.components.mgt-person-card	64%	38%	0	➖
mgt-components.src.components.mgt-profile	40%	100%	0	❌
mgt-components.src.components.mgt-theme-toggle	100%	100%	0	✔
mgt-components.src.components.sub-components.mgt-flyout	72%	53%	0	➖
mgt-components.src.components.sub-components.mgt-spinner	100%	100%	0	✔
mgt-components.src.graph	38%	89%	0	❌
mgt-components.src.styles	92%	80%	0	✔
mgt-components.src.utils	79%	28%	0	✔
mgt-element.dist.es6.components.src.components	73%	79%	0	➖
mgt-element.dist.es6.mock.src.mock	90%	72%	0	✔
mgt-element.dist.es6.providers.src.providers	85%	69%	0	✔
mgt-element.dist.es6.src	91%	80%	0	✔
mgt-element.dist.es6.utils.src.utils	66%	69%	0	➖
mgt-element.src	88%	100%	0	✔
mgt-element.src.components	84%	100%	0	✔
mgt-element.src.mock	81%	56%	0	✔
mgt-element.src.providers	80%	85%	0	✔
mgt-element.src.utils	71%	90%	0	➖
Summary	65% (12446 / 19095)	63% (405 / 638)	0	➖

[github-actions]

📖 The updated storybook is available here

[gavinbarron]

Great stuff!