fix(attribute): don't null boolean properties

Author: manucorporat

src/core/attribute-changed.ts

@@ -8,6 +8,8 @@ export function attributeChangedCallback(attrPropsMap: {[attr: string]: string},
   if (propName) {
     // there is not need to cast the value since, it's already casted when
     // the prop is setted
-    (elm as any)[propName] = newVal;
+    (elm as any)[propName] = newVal === null && typeof (elm as any)[propName] === 'boolean'
+      ? false
+      : newVal;
   }
 }

test/karma/test-app/components.d.ts

@@ -218,6 +218,7 @@ export namespace Components {
 
   interface ReflectToAttr {
     'bool': boolean;
+    'disabled': boolean;
     'dynamicNu': number;
     'dynamicStr': string;
     'nu': number;
@@ -228,6 +229,7 @@ export namespace Components {
   }
   interface ReflectToAttrAttributes extends StencilHTMLAttributes {
     'bool'?: boolean;
+    'disabled'?: boolean;
     'dynamicNu'?: number;
     'dynamicStr'?: string;
     'nu'?: number;

test/karma/test-app/reflect-to-attr/cmp.tsx

@@ -13,6 +13,7 @@ export class ReflectToAttr {
   @Prop({reflectToAttr: true}) null: string = null;
   @Prop({reflectToAttr: true}) bool = false;
   @Prop({reflectToAttr: true}) otherBool = true;
+  @Prop({reflectToAttr: true}) disabled = false;
 
   @Prop({reflectToAttr: true, mutable: true}) dynamicStr: string;
   @Prop({reflectToAttr: true}) dynamicNu: number;

test/karma/test-app/reflect-to-attr/index.html

@@ -2,4 +2,13 @@
 <meta charset="utf8">
 <script src="/build/testapp.js"></script>
 
-<reflect-to-attr></reflect-to-attr>
+<reflect-to-attr></reflect-to-attr>
+
+<button id="toggle" onclick="toggleDisabled()">Toggle disabled</button>
+
+<script>
+  function toggleDisabled() {
+    const item = document.querySelector('reflect-to-attr');
+    item.disabled = !item.disabled;
+  }
+</script>

test/karma/test-app/reflect-to-attr/karma.spec.ts

@@ -41,4 +41,18 @@ describe('reflect-to-attr', function() {
     expect(cmp.getAttribute('dynamic-nu')).toEqual('123');
   });
 
+  it('should reflect booleans property', async () => {
+    const cmp = app.querySelector('reflect-to-attr') as any;
+    expect(cmp.disabled).toBe(false);
+
+    const toggle = app.querySelector('#toggle') as any;
+    toggle.click();
+    await waitForChanges();
+    expect(cmp.disabled).toBe(true);
+
+    toggle.click();
+    await waitForChanges();
+    expect(cmp.disabled).toBe(false);
+  });
+
 });