fix(core): avoid duplicate mediaQuery activations (#937)

angular · Dec 18, 2018 · 23592ee · 23592ee
1 parent 4be5cef
commit 23592ee
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/src/lib/core/media-marshaller/media-marshaller.spec.ts b/src/lib/core/media-marshaller/media-marshaller.spec.ts
@@ -22,6 +22,7 @@ describe('media-marshaller', () => {
       providers: [MockMatchMediaProvider]
     });
     spyOn(MediaMarshaller.prototype, 'activate').and.callThrough();
+    spyOn(MediaMarshaller.prototype, 'updateStyles').and.callThrough();
   });
 
   // Single async inject to save references; which are used in all tests below
@@ -39,6 +40,12 @@ describe('media-marshaller', () => {
     expect(mediaMarshaller.activate).toHaveBeenCalled();
   });
 
+  it('doesn\'t activate when match-media activates the same breakpoint twice', () => {
+    matchMedia.activate('xs');
+    matchMedia.activate('xs');
+    expect(mediaMarshaller.updateStyles).toHaveBeenCalledTimes(1);
+  });
+
   it('should set correct activated breakpoint', () => {
     matchMedia.activate('lg');
     expect(mediaMarshaller.activatedBreakpoint).toBe('lg');

diff --git a/src/lib/core/media-marshaller/media-marshaller.ts b/src/lib/core/media-marshaller/media-marshaller.ts
@@ -65,14 +65,17 @@ export class MediaMarshaller {
    */
   activate(mc: MediaChange) {
     const bp: BreakPoint | null = this.findByQuery(mc.mediaQuery);
-    if (mc.matches && bp) {
-      this.activatedBreakpoints.push(bp);
-      this.activatedBreakpoints.sort(prioritySort);
-    } else if (!mc.matches && bp) {
-      // Remove the breakpoint when it's deactivated
-      this.activatedBreakpoints.splice(this.activatedBreakpoints.indexOf(bp), 1);
+    if (bp) {
+      if (mc.matches && this.activatedBreakpoints.indexOf(bp) === -1) {
+        this.activatedBreakpoints.push(bp);
+        this.activatedBreakpoints.sort(prioritySort);
+        this.updateStyles();
+      } else if (!mc.matches && this.activatedBreakpoints.indexOf(bp) !== -1) {
+        // Remove the breakpoint when it's deactivated
+        this.activatedBreakpoints.splice(this.activatedBreakpoints.indexOf(bp), 1);
+        this.updateStyles();
+      }
     }
-    this.updateStyles();
   }
 
   /**