Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

fix(buttons): respect disabled attribute #4026

Closed
wesleycho wants to merge 1 commit into from
Closed

fix(buttons): respect disabled attribute #4026

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
fix(buttons): respect disabled attribute 
- Ensure disabled attribute is respected due to a change in Bootstrap 3.3.5 CSS
  • Loading branch information
@wesleycho
wesleycho committed Jul 28, 2015
commit 7a1bc7a285584686e38f0b1862f4e487c2b2e98a
8 changes: 8 additions & 0 deletions src/buttons/buttons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ angular.module('ui.bootstrap.buttons', [])

//ui->model
element.bind(buttonsCtrl.toggleEvent, function () {
if ('disabled' in attrs) {
return;
Copy link
Contributor

@RobJacobs RobJacobs Jul 28, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this the preferred syntax over if(attrs.disabled) which dropwdownToggle and tab directives use?

Copy link
Contributor Author

@wesleycho wesleycho Jul 28, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue is Angular 1.4 - it turns out that attrs.disabled is undefined there, but the key is present.

Copy link
Contributor Author

@wesleycho wesleycho Jul 28, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the Tabs component, this should be fine - the only way there would be a problem is if the disabled attribute is used instead of disable, which is deprecated use.

For the dropdown toggle, I opened #4033

Copy link
Contributor Author

@wesleycho wesleycho Jul 29, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update: Looks like the dropdown works perfectly fine in 1.4

Copy link
Contributor Author

@wesleycho wesleycho Jul 29, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tabs look fine too.

}

var isActive = element.hasClass(buttonsCtrl.activeClass);

if (!isActive || angular.isDefined(attrs.uncheckable)) {
Expand Down Expand Up @@ -64,6 +68,10 @@ angular.module('ui.bootstrap.buttons', [])

//ui->model
element.bind(buttonsCtrl.toggleEvent, function () {
if ('disabled' in attrs) {
return;
}

scope.$apply(function () {
ngModelCtrl.$setViewValue(element.hasClass(buttonsCtrl.activeClass) ? getFalseValue() : getTrueValue());
ngModelCtrl.$render();
Expand Down
35 changes: 35 additions & 0 deletions src/buttons/test/buttons.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,23 @@ describe('buttons', function () {
expect($scope.model).toEqual(2);
});

it('should not toggle when disabled - issue 4013', function () {
$scope.model = 1;
$scope.falseVal = 0;
var btn = compileButton('<button disabled ng-model="model" btn-checkbox btn-checkbox-true="falseVal">click</button>', $scope);

expect(btn).not.toHaveClass('active');
expect($scope.model).toEqual(1);

btn.click();

expect(btn).not.toHaveClass('active');

$scope.$digest();

expect(btn).not.toHaveClass('active');
});

describe('setting buttonConfig', function () {
var originalActiveClass, originalToggleEvent;

Expand Down Expand Up @@ -177,6 +194,24 @@ describe('buttons', function () {
expect(btns.eq(1)).not.toHaveClass('active');
});

it('should not toggle when disabled - issue 4013', function () {
$scope.model = 1;
var btns = compileButtons('<button ng-model="model" btn-radio="1">click1</button><button disabled ng-model="model" btn-radio="2">click2</button>', $scope);

expect(btns.eq(0)).toHaveClass('active');
expect(btns.eq(1)).not.toHaveClass('active');

btns.eq(1).click();

expect(btns.eq(0)).toHaveClass('active');
expect(btns.eq(1)).not.toHaveClass('active');

$scope.$digest();

expect(btns.eq(0)).toHaveClass('active');
expect(btns.eq(1)).not.toHaveClass('active');
});

describe('uncheckable', function () {
//model -> UI
it('should set active class based on model', function () {
Expand Down