there is a grey outline around the button occurs when the dropdown is clicked for the second time.

so far in css I have added this style properties:

.dropdown ::v-deep .dropdown-toggle {
    color: black;
    background-color: white;
    box-shadow: none;
    &:after {
        display: none;
    }
    &:hover {
        background: green;
        color: white;
        border-color: transparent;
    }
}

CodePudding user response：

I achieved to remove it by targeting .dropdown-toggle:active and setting box-shadow: none !important as suggested in this answer: bootstrap button shows blue outline when clicked

PS: add some deep selectors if needed.