fix(breakpoint-observer): split comma separated queries into separte queries (#10789)

Author: josephperrott

src/cdk/layout/breakpoints-observer.spec.ts

@@ -50,6 +50,16 @@ describe('BreakpointObserver', () => {
     expect(mediaMatcher.queryCount).toBe(2);
   });
 
+  it('splits combined query strings into individual matchMedia listeners', () => {
+    expect(mediaMatcher.queryCount).toBe(0);
+    breakpointManager.observe('query1, query2');
+    expect(mediaMatcher.queryCount).toBe(2);
+    breakpointManager.observe('query1');
+    expect(mediaMatcher.queryCount).toBe(2);
+    breakpointManager.observe('query2, query3');
+    expect(mediaMatcher.queryCount).toBe(3);
+  });
+
   it('accepts an array of queries', () => {
     let queries = ['1 query', '2 query', 'red query', 'blue query'];
     breakpointManager.observe(queries);

src/cdk/layout/breakpoints-observer.ts

@@ -45,18 +45,19 @@ export class BreakpointObserver implements OnDestroy {
    * @returns Whether any of the media queries match.
    */
   isMatched(value: string | string[]): boolean {
-    let queries = coerceArray(value);
+    const queries = splitQueries(coerceArray(value));
     return queries.some(mediaQuery => this._registerQuery(mediaQuery).mql.matches);
   }
 
   /**
    * Gets an observable of results for the given queries that will emit new results for any changes
    * in matching of the given queries.
+   * @param value One or more media queries to check.
    * @returns A stream of matches for the given queries.
    */
   observe(value: string | string[]): Observable<BreakpointState> {
-    let queries = coerceArray(value);
-    let observables = queries.map(query => this._registerQuery(query).observable);
+    const queries = splitQueries(coerceArray(value));
+    const observables = queries.map(query => this._registerQuery(query).observable);
 
     return combineLatest(observables, (a: BreakpointState, b: BreakpointState) => {
       return {
@@ -72,9 +73,9 @@ export class BreakpointObserver implements OnDestroy {
       return this._queries.get(query)!;
     }
 
-    let mql: MediaQueryList = this.mediaMatcher.matchMedia(query);
+    const mql: MediaQueryList = this.mediaMatcher.matchMedia(query);
     // Create callback for match changes and add it is as a listener.
-    let queryObservable = fromEventPattern(
+    const queryObservable = fromEventPattern(
       // Listener callback methods are wrapped to be placed back in ngZone. Callbacks must be placed
       // back into the zone because matchMedia is only included in Zone.js by loading the
       // webapis-media-query.js file alongside the zone.js file.  Additionally, some browsers do not
@@ -93,8 +94,18 @@ export class BreakpointObserver implements OnDestroy {
       );
 
     // Add the MediaQueryList to the set of queries.
-    let output = {observable: queryObservable, mql: mql};
+    const output = {observable: queryObservable, mql: mql};
     this._queries.set(query, output);
     return output;
   }
 }
+
+/**
+ * Split each query string into separate query strings if two queries are provided as comma
+ * separated.
+ */
+function splitQueries(queries: string[]): string[] {
+  return queries.map((query: string) => query.split(','))
+                .reduce((a1: string[], a2: string[]) => a1.concat(a2))
+                .map(query => query.trim());
+}