How can I remove :active from bootstrap button

Question

I have a website, where I have multiple buttons. Once a button is pressed I populate a list, though my problem is that the last pressed button keeps to be looking pressed (has the :active class). I thought about using angular's $timeout to reset the button, though the removeClass function doesn't do the trick.

My view looks like this:

    div(ng-controller='productButtonController')
    div(ng-repeat='product in products')
        div.col-md-4
            button.btn.btn-block.sell-button(id='{{product._id}}' ng-click='sell()'){{product.name}}

and my controller:

app.controller('productButtonController', ['$scope', '$timeout', 'productServices', 'flash',
    function($scope, $timeout, productServices, flash) {
        productServices.getProducts()
            .success(function(result) {
                $scope.products = result.data
            })
            .error(showErrorMessage(flash))

        $scope.sell = function() {
            console.log(this.product)
            that = this
            $('#' + that.product._id).removeClass('active')
        }
    }
])

What does your code look like for the button? I was running into an issue where I was using bootstraps toggle to change the appearance and angulars style conditionals at the same time which was causing the button to be double toggled, so it didn't display correctly. — Matthew Green, Aug 08 '14 at 14:20
So show us your js/html code. If possible reproduce this fiddle. — Rahil Wazir, Aug 08 '14 at 14:22

score 8 · Answer 1 · edited May 23 '17 at 12:07

8

Add the angular $window service to your dependencies for the controller
Call the blur method on the document's active element, which will be your button.

$window.document.activeElement.blur();

See How do you clear the focus in javascript?.

edited May 23 '17 at 12:07

Community

1
1

answered Jun 02 '15 at 13:04

benmod

371
6
10

score 6 · Answer 2 · answered Apr 05 '16 at 00:46

6

This code from Justin Poehnelt's handy GIST solves this elegantly.

app.directive('blur', [function () {
    return {
        restrict: 'A',
        link: function (scope, element) {
            element.on('click', function () {
                element.blur();
            });
        }
    };
}]);

Add the blur attribute to a button/element you need blurred after click. Eg.

<button type="button" blur>Click me</button>

answered Apr 05 '16 at 00:46

dean grande

734
13
15

This works best, as you can then use it wherever needed in your app. – JoshMB Oct 24 '16 at 18:55
Good solution. Had to change to `element[0].blur();` to make it work. – Alex Dec 11 '16 at 09:43

miron · Accepted Answer · 2014-08-08T14:35:27.213

If you simply want to override the focus status of the bootstrap buttons you could do it with:

.btn:focus{
    outline: none;
}

Then your buttons should look like:

<button class="btn btn-default">My button 1</button>

It's also important that the stylesheet which overrides the button status is loaded after the bootstrap stylesheet.

EDIT:

Sorry, but the previous step only removes the outline. The background-color of the button still remains the same.

Since bootstrap doesn't append any active classes to the clicked element as far as i know you need to change the :focus status of the button:

$('#' + that.product._id).blur();

Let me know if this works for you.

How can I remove :active from bootstrap button

3 Answers3