fix(core): reset current value when directive is cleared (#1376)

angular · Dec 23, 2021 · c4f9fe2 · c4f9fe2
1 parent 4ea6714
commit c4f9fe2
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/projects/libs/flex-layout/core/base/base2.ts b/projects/libs/flex-layout/core/base/base2.ts
@@ -105,6 +105,7 @@ export abstract class BaseDirective2 implements OnChanges, OnDestroy {
     });
     this.applyStyleToElement(this.mru);
     this.mru = {};
+    this.currentValue = undefined;
   }
 
   /** Force trigger style updates on DOM element */

diff --git a/projects/libs/flex-layout/core/media-marshaller/media-marshaller.ts b/projects/libs/flex-layout/core/media-marshaller/media-marshaller.ts
@@ -135,7 +135,7 @@ export class MediaMarshaller {
     if (bpMap) {
       const values = this.getActivatedValues(bpMap, key);
       if (values) {
-        return values.get(key) !== undefined || false;
+        return values.get(key) !== undefined ?? false;
       }
     }
     return false;
@@ -154,7 +154,7 @@ export class MediaMarshaller {
       bpMap = new Map().set(bp, new Map().set(key, val));
       this.elementMap.set(element, bpMap);
     } else {
-      const values = (bpMap.get(bp) || new Map()).set(key, val);
+      const values = (bpMap.get(bp) ?? new Map()).set(key, val);
       bpMap.set(bp, values);
       this.elementMap.set(element, bpMap);
     }

diff --git a/projects/libs/flex-layout/flex/layout/layout.spec.ts b/projects/libs/flex-layout/flex/layout/layout.spec.ts
@@ -300,6 +300,30 @@ describe('layout directive', () => {
       }, styler);
 
     });
+
+    it('should fallback to default styles after multiple state changes', () => { // tslint:disable-line:max-line-length
+      createTestComponent(`<div fxLayout.md='column'></div>`);
+
+      expectNativeEl(fixture).not.toHaveStyle({
+        'flex-direction': 'column'
+      }, styler);
+
+      mediaController.activate('md');
+      expectNativeEl(fixture).toHaveStyle({
+        'flex-direction': 'column'
+      }, styler);
+
+      mediaController.activate('lg');
+      expectNativeEl(fixture).not.toHaveStyle({
+        'flex-direction': 'column'
+      }, styler);
+
+      mediaController.activate('md');
+      expectNativeEl(fixture).toHaveStyle({
+        'flex-direction': 'column'
+      }, styler);
+    });
+
     it('should fallback to closest overlapping value when the active mediaQuery change is not configured', () => { // tslint:disable-line:max-line-length
       createTestComponent(`<div fxLayout fxLayout.gt-sm='column' fxLayout.md='row'></div>`);