Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Commit fb61f05

Browse files
committed
fix(media-observer): return correct value for isActive on init
Previously, only triggering `MatchMedia.observe` would correctly register media queries for later usage in the `MediaObserver`. This is incorrect, and queries should be registered if a) they are valid breakpoints in Angular Layout, and b) they are not currently registered. Fixes #1025
1 parent bf2355b commit fb61f05

File tree

3 files changed

+4
-7
lines changed

3 files changed

+4
-7
lines changed

src/lib/core/match-media/match-media.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export class MatchMedia {
4848
*/
4949
isActive(mediaQuery: string): boolean {
5050
const mql = this.registry.get(mediaQuery);
51-
return !!mql ? mql.matches : false;
51+
return !!mql ? mql.matches : this.registerQuery(mediaQuery).some(m => m.matches);
5252
}
5353

5454
/**

src/lib/core/media-observer/media-observer.spec.ts

+1-4
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ describe('media-observer', () => {
5959
it('can supports the `.isActive()` API', () => {
6060
expect(media$).toBeDefined();
6161

62+
mediaController.autoRegisterQueries = false;
6263
// Activate mediaQuery associated with 'md' alias
6364
mediaController.activate('md');
6465
expect(mediaObserver.isActive('md')).toBeTruthy();
@@ -126,10 +127,6 @@ describe('media-observer', () => {
126127

127128
activateQuery('gt-lg');
128129
expect(current.mediaQuery).toEqual(findMediaQuery('gt-lg'));
129-
130-
activateQuery('unknown');
131-
expect(current.mediaQuery).toEqual(findMediaQuery('gt-lg'));
132-
133130
} finally {
134131
mediaController.autoRegisterQueries = true;
135132
subscription.unsubscribe();

src/lib/core/media-observer/media-observer.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export class MediaObserver implements OnDestroy {
113113
const aliases = splitQueries(coerceArray(value));
114114
return aliases.some(alias => {
115115
const query = toMediaQuery(alias, this.breakpoints);
116-
return this.matchMedia.isActive(query);
116+
return query !== null && this.matchMedia.isActive(query);
117117
});
118118
}
119119

@@ -201,7 +201,7 @@ export class MediaObserver implements OnDestroy {
201201
*/
202202
function toMediaQuery(query: string, locator: BreakPointRegistry) {
203203
const bp = locator.findByAlias(query) || locator.findByQuery(query);
204-
return bp ? bp.mediaQuery : query;
204+
return bp ? bp.mediaQuery : null;
205205
}
206206

207207
/**

0 commit comments

Comments
 (0)