fix(media-observer): return correct value for isActive on init (#1244)

angular · May 8, 2020 · bf069af · bf069af
1 parent bf2355b
commit bf069af
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 7 deletions.
diff --git a/src/lib/core/match-media/match-media.ts b/src/lib/core/match-media/match-media.ts
@@ -48,7 +48,7 @@ export class MatchMedia {
    */
   isActive(mediaQuery: string): boolean {
     const mql = this.registry.get(mediaQuery);
-    return !!mql ? mql.matches : false;
+    return !!mql ? mql.matches : this.registerQuery(mediaQuery).some(m => m.matches);
   }
 
   /**

diff --git a/src/lib/core/media-observer/media-observer.spec.ts b/src/lib/core/media-observer/media-observer.spec.ts
@@ -59,6 +59,7 @@ describe('media-observer', () => {
     it('can supports the `.isActive()` API', () => {
       expect(media$).toBeDefined();
 
+      mediaController.autoRegisterQueries = false;
       // Activate mediaQuery associated with 'md' alias
       mediaController.activate('md');
       expect(mediaObserver.isActive('md')).toBeTruthy();
@@ -126,10 +127,6 @@ describe('media-observer', () => {
 
         activateQuery('gt-lg');
         expect(current.mediaQuery).toEqual(findMediaQuery('gt-lg'));
-
-        activateQuery('unknown');
-        expect(current.mediaQuery).toEqual(findMediaQuery('gt-lg'));
-
       } finally {
         mediaController.autoRegisterQueries = true;
         subscription.unsubscribe();

diff --git a/src/lib/core/media-observer/media-observer.ts b/src/lib/core/media-observer/media-observer.ts
@@ -113,7 +113,7 @@ export class MediaObserver implements OnDestroy {
     const aliases = splitQueries(coerceArray(value));
     return aliases.some(alias => {
       const query = toMediaQuery(alias, this.breakpoints);
-      return this.matchMedia.isActive(query);
+      return query !== null && this.matchMedia.isActive(query);
     });
   }
 
@@ -201,7 +201,7 @@ export class MediaObserver implements OnDestroy {
  */
 function toMediaQuery(query: string, locator: BreakPointRegistry) {
   const bp = locator.findByAlias(query) || locator.findByQuery(query);
-  return bp ? bp.mediaQuery : query;
+  return bp ? bp.mediaQuery : null;
 }
 
 /**