Multi-select dropdown focus borders not fully visible after navigating and selecting items

[FosterSamuel]

Environment Information

• Package version(s): Latest on Fluent website at time of writing (March 26, 2021)
• Browser and OS versions: Edge 89.0.774.45

Describe the issue:

When navigating through a multi-select dropdown via keyboard and selecting items, the top and bottom borders become inconsistent and turn into a single line. You can see a GIF of this here:

The first few items are fine. However, after selecting a few and navigating, you can see the focus border turn into a single line. This was mentioned in #16800 but is not fixed.

Please provide a reproduction of the issue in a codepen:

In the multi-select dropdown example: https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown

Actual behavior:

Focus border is not fully visible.

Expected behavior:

Focus border should be fully visible.

[gouttierre]

@FosterSamuel- Thank you for filing this item. I see the repo as stated. The borders / dividers do not behave consistently and shows as single dividers. @TristanWatanabe - Would you be able to confirm this issue and perhaps review #16800 for the proposed fix provided?

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.