[Bug]: Pickers - TagPicker unpredictable behavior. Focus border appears in all other component in project.

[mishabutuzov]

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.17763
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
    Memory: 18.73 GB / 31.85 GB
  Browsers:
    Chrome: 107.0.5304.107
    Internet Explorer: 11.0.17763.1852




    "@fluentui/react": "8.96.0",

Are you reporting Accessibility issue?

None

Reproduction

https://codepen.io/mishabutuzov/pen/KKeLoGp

Bug Description

Actual Behavior

We are trying to implement a TagPicker, but the whole project breaks when we click on an element to remove it.
After clicking on any button in the project, the focus border appears.

I am attaching an example, but this bug is present in the example in the official documentation.

Expected Behavior

When we manipulate with TagPicker, all other components still work well. No focus border after clicking

Logs

No response

Requested priority

High

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[mishabutuzov]

Question still actual