Disable within disabled fieldset

src/uiSelectDirective.js

@@ -101,9 +101,28 @@ uis.directive('uiSelect',
 
         attrs.$observe('disabled', function() {
           // No need to use $eval() (thanks to ng-disabled) since we already get a boolean instead of a string
-          $select.disabled = attrs.disabled !== undefined ? attrs.disabled : false;
+          $select.disabledFlag = attrs.disabled !== undefined ? attrs.disabled : false;
+          $select.disabled = $select.disabledFlag || $select.disabledSelector;
         });
 
+        // When inside a disabled fieldset, disabledWatch element will be disabled
+        var disabledWatch = angular.element("<input type='hidden' class='ui-select-disable-watch' aria-label=''></input>");
+        element.append(disabledWatch);
+
+        // Watch the disabled flag on disabledWatch, and set $select.disabled.
+        scope.$watch(
+          function () { 
+            if (disabledWatch.is) { 
+              return disabledWatch.is(":disabled"); // use jquery if available
+            } 
+            return !!element[0].querySelector('.ui-select-disable-watch:disabled');
+          }, 
+          function (value) {
+            $select.disabledSelector = value;
+            $select.disabled = $select.disabledFlag || $select.disabledSelector;
+          }
+        );
+
         attrs.$observe('resetSearchInput', function() {
           // $eval() is needed otherwise we get a string instead of a boolean
           var resetSearchInput = scope.$eval(attrs.resetSearchInput);

test/select.spec.js

@@ -657,6 +657,23 @@ describe('ui-select tests', function () {
     clickMatch(el3);
     expect(isDropdownOpened(el3)).toEqual(true);
   });
+
+  it('should be disabled when inside a disabled fieldset', function() {
+    var fieldset = angular.element("<fieldset></fieldset>");
+    var e1 = createUiSelect({theme: 'select2'});
+    var $select = e1.scope().$select;
+
+    fieldset.append(e1);
+    expect($select.disabled).toEqual(false);
+
+    fieldset.prop('disabled', true);
+    scope.$digest();
+    expect($select.disabled).toEqual(true);
+
+    fieldset.prop('disabled', false);
+    scope.$digest();
+    expect($select.disabled).toEqual(false);
+  });
 
   it('should allow decline tags when tagging function returns null', function () {
     scope.taggingFunc = function (name) {
@@ -1950,6 +1967,23 @@ describe('ui-select tests', function () {
       expect(ctrl.items).toEqual([]);
     });
 
+    it('should be disabled when inside a disabled fieldset', function() {
+      var fieldset = angular.element("<fieldset></fieldset>");
+      var e1 = createUiSelectMultiple({theme: 'select2'});
+      var $select = e1.scope().$select;
+
+      fieldset.append(e1);
+      expect($select.disabled).toEqual(false);
+
+      fieldset.prop('disabled', true);
+      scope.$digest();
+      expect($select.disabled).toEqual(true);
+
+      fieldset.prop('disabled', false);
+      scope.$digest();
+      expect($select.disabled).toEqual(false);
+    });
+
     it('should render initial state', function () {
       var el = createUiSelectMultiple();
       expect(el).toHaveClass('ui-select-multiple');