b-dropdown-item-button has inconsistent styling with b-dropdown-item in Chromium browsers

[bbugh]

Describe the bug

In Chromium, b-dropdown-item-button shows a border when clicked (on :focus), but b-dropdown-item doesn't.

(Backgrounds are lightened to show the border effect)

b-dropdown-item-button seems to be picking up the button outline: -webkit-focus-ring-color effect from Reboot. Firefox does not support -webkit-focus-ring-color so it show the single dotted outline.

https://github.com/twbs/bootstrap/blob/ebd9eb105ab094af747c09082ced1df71aaec123/scss/_reboot.scss#L419-L422

Steps to reproduce the bug

1. Use a b-dropdown-item-button
2. Click on it and observe the blue border

demo

Expected behavior

I would expect the designs of these to behave consistently on all browsers, either both with or both without the outline (preferably without).

Versions

Libraries:

• BootstrapVue: 2.16.0
• Bootstrap: 4.5.3
• Vue: 2.6.12

Environment:

• Device: Mac
• OS: Mojave
• Browser: Firefox, Chromium
• Version: 81.02, 86.0.4240.99

Demo link

https://codesandbox.io/s/b-dropdown-item-button-styling-1ier8?file=/App.vue

[Hiws]

This behavior looks to be the same as with native Bootstrap.
https://getbootstrap.com/docs/4.5/components/dropdowns/#menu-items
https://v5.getbootstrap.com/docs/5.0/components/dropdowns/#menu-items

So I don't think we should change this behavior here, as this is more of an upstream issue.
You could try suggesting it on Bootstrap's GitHub.
https://github.com/twbs/bootstrap/issues

[bbugh]

Looks like you're right. I thought I checked it in upstream bootstrap, but it's not impossible that while juggling a bunch of browsers I looked at it in Firefox by accident and thought it was fine.

It looks like @tmorehouse has brought this same issue up a few times on bootstrap's repo. twbs/bootstrap#23329 (comment) and twbs/bootstrap#23990 (comment).

I made a new issue over there: twbs/bootstrap#31949

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!