From c6ca17089b1a6abb838fda7d2595e1d2ca8e9094 Mon Sep 17 00:00:00 2001
From: Jason Bedard <jason+github@jbedard.ca>
Date: Fri, 21 Dec 2018 20:18:50 -0800
Subject: [PATCH] fix($compile): fix ng-prop-* with undefined values

Fixes #16797
Closes #16798
---
 src/ng/compile.js     |  2 +-
 test/ng/ngPropSpec.js | 42 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/ng/compile.js b/src/ng/compile.js
index 0bb6e386eddc..4afb7caee72a 100644
--- a/src/ng/compile.js
+++ b/src/ng/compile.js
@@ -3837,7 +3837,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
             pre: function ngPropPreLinkFn(scope, $element) {
               function applyPropValue() {
                 var propValue = ngPropGetter(scope);
-                $element.prop(propName, sanitizer(propValue));
+                $element[0][propName] = sanitizer(propValue);
               }
 
               applyPropValue();
diff --git a/test/ng/ngPropSpec.js b/test/ng/ngPropSpec.js
index 9b4f9fab0637..ddbe0d36b63a 100644
--- a/test/ng/ngPropSpec.js
+++ b/test/ng/ngPropSpec.js
@@ -49,6 +49,48 @@ describe('ngProp*', function() {
     expect(element.prop('asdf')).toBe(true);
   }));
 
+  // https://github.com/angular/angular.js/issues/16797
+  it('should support falsy property values', inject(function($rootScope, $compile) {
+    var element = $compile('<span ng-prop-text="myText" />')($rootScope);
+    // Initialize to truthy value
+    $rootScope.myText = 'abc';
+    $rootScope.$digest();
+    expect(element.prop('text')).toBe('abc');
+
+    // Assert various falsey values get assigned to the property
+    $rootScope.myText = '';
+    $rootScope.$digest();
+    expect(element.prop('text')).toBe('');
+    $rootScope.myText = 0;
+    $rootScope.$digest();
+    expect(element.prop('text')).toBe(0);
+    $rootScope.myText = false;
+    $rootScope.$digest();
+    expect(element.prop('text')).toBe(false);
+    $rootScope.myText = undefined;
+    $rootScope.$digest();
+    expect(element.prop('text')).toBeUndefined();
+    $rootScope.myText = null;
+    $rootScope.$digest();
+    expect(element.prop('text')).toBe(null);
+  }));
+
+  it('should directly map special properties (class)', inject(function($rootScope, $compile) {
+    var element = $compile('<span ng-prop-class="myText" />')($rootScope);
+    $rootScope.myText = 'abc';
+    $rootScope.$digest();
+    expect(element[0].class).toBe('abc');
+    expect(element).not.toHaveClass('abc');
+  }));
+
+  it('should not use jQuery .prop() to avoid jQuery propFix/hooks', inject(function($rootScope, $compile) {
+    var element = $compile('<span ng-prop-class="myText" />')($rootScope);
+    spyOn(jqLite.prototype, 'prop');
+    $rootScope.myText = 'abc';
+    $rootScope.$digest();
+    expect(jqLite.prototype.prop).not.toHaveBeenCalled();
+  }));
+
   it('should support mixed case using underscore-separated names', inject(function($rootScope, $compile) {
     var element = $compile('<span ng-prop-a_bcd_e="value" />')($rootScope);
     $rootScope.value = 123;