MediaObserver behaving incorrectly

[jkossis]

Bug Report

What is the expected behavior?

MediaObserver should not return matches: true for both sm and xs at the same time. These are mutually exclusive.

What is the current behavior?

MediaObserver returns matches: true for both sm and xs at the same time.

What are the steps to reproduce?

I am printing to the console the different matches. When dragging the screen from xs to sm, you will see the match array contains both xs and sm, also evidenced by it growing from 5 -> 7. Interestingly enough, when dragging the screen from sm to xs, it works as expected.

What is the use-case or motivation for changing an existing behavior?

The expected behavior should be the correct behavior.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 10, Mac OS 10.14.6, Firefox 78.0.1

Is there anything else we should know?

[lukaspj]

I can second this issue.

This seems to be an issue whenever the media-query goes from "smaller" to "larger", i.e. xs->sm, sm->md, md->lg
But not the other way around e.g. sm->xs

[lukaspj]

To add some info:
I'm using flex-layout 9.0.0-beta.31

I have been unable to recreate the issue with unit-tests, the following example works fine:

    it('can observe a size increase from xs to sm', fakeAsync(() => {
      mediaController.useOverlaps = true;
      let current: MediaChange = new MediaChange(true);
      let subscription = mediaObserver.asObservable().subscribe((change: Array<MediaChange>) => {
        current = change[0];
      });

      // Activate mediaQuery associated with 'xs' alias
      activateQuery('xs');
      expect(current.mediaQuery).toEqual(findMediaQuery('xs'));

      activateQuery('sm');
      expect(current.mediaQuery).toEqual(findMediaQuery('sm'));

      // Un-subscribe
      subscription.unsubscribe();

      mediaController.clearAll();
    }));

[lukaspj]

For anyone who need a work-around, it could be something along the lines of:

    mediaObserver.asObservable()
      .pipe(
        map(changes => {
          const breakpointChanges = changes.filter(change => ['xs', 'sm', 'md', 'lg', 'xl'].includes(change.mqAlias));
          if (breakpointChanges.length > 1) {
            const lastBreakpointChange = breakpointChanges[breakpointChanges.length - 1];
            const lastBreakpointChangeIndex = changes.findIndex(change => change.mqAlias === lastBreakpointChange.mqAlias);
            changes = changes.splice(lastBreakpointChangeIndex);
          }
          return changes;
        })
      )

[CaerusKaru]

Ref: #1308

[CaerusKaru]

@lukaspj Can you check to see if the latest nightly version fixes this?

[lukaspj]

Actually, I can't reproduce it at all, neither on new nor old version.
Seeming as it seems to be a browser implemetation detail, browsers might have fixed or changed their behaviour?

Idk, but I checked my version of the code out from 19. July and tried to replicate it in Edge, Chrome and Firefox without luck.. Sorry!

[Ocunidee]

I could reproduce it 2 weeks ago. It was causing an issue when I was going from a full screen browser window to a smaller browser window (displaying as expected) and then back to a full screen window (not displaying at it should, behaving same as the smaller breakpoint activated previously)

I may not have time to test today, but I can see if it fixes the issue without your workaround @lukaspj

[CaerusKaru]

I'm going to consolidate this with #1059 since it seems like they may be related. If in the course of fixing that issue, this does not get fixed, we can reopen.

Duplicate of #1059.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}