PeoplePicker doesn't lose focus ring with personSelectionLimit property

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 3.14.0]

Expected / Desired Behavior / Question

Expected behaviour is for the PeoplePicker to lose focus once the user either tabs out or clicks elsewhere in the UI.

Observed Behavior

Limiting the number of people a user can select in PeoplePicker using the property personSelectionLimit={1}, once a user is selected from the suggested people, the input box doesn't lose the focus ring. I tried tabbing out and/or clicking anywhere else and the input box still has focus (as well as it's associated styles).

However, this bug only occurs if you select the user in the suggested people using a mouse click as opposed to hitting the enter key.

I noticed when the bug occurs, there is a certain text style that stays in the DOM and is never cleared, which likely explains why the focus isn't lost (since it's added using an ::after style instead of the default browser focus outline).

.text::after styles persist, see below:

<div id="people" class="defaultClass">
  <div class="ms-BasePicker ms-PeoplePicker picker">
    <div class="ms-FocusZone css" data-focuszone-id="FocusZone">
      <div class="ms-SelectionZone" role="presentation">
        <div class="ms-BasePicker-text text">
          <span id="selected-items-id" class="ms-BasePicker-itemsWrapper itemsWrapper" role="list">
          ::after
          ...

If I remove personSelectionLimit={1} this bug doesn't occur. I don't think this bug is related to setting this limit to 1 specifically, because the bug occurs whenever I hit the limit set in this property. For instance, if I change the limit to 3, there is no bug when adding the first and second name. However, once I select the third, or upper limit, the same bug behaviour appears.

Steps to Reproduce

1. Add personSelectionLimit={1} property to PeoplePicker
2. Type in the input
3. Select the intended name using your mouse (will not lose focus) or by hitting enter (will lose focus once tabbed out or click elsewhere in the UI)
4. Inspect the DOM to see the psuedo-element which isn't cleared

Thank you!

Start by reproducing the PeoplePicker issue with personSelectionLimit set to 1, comparing mouse selection with Enter-key selection and inspecting the persistent .text::after pseudo-element. Trace the PeoplePicker focus behavior around reaching the selection limit; done means the focus ring clears after tabbing or clicking elsewhere, while Enter-key behavior remains unchanged.