angular / angular/components

CDK BreapointObserver emits multiple 'true' for differents sizes of screen

Open
#17,013 1 comment 1 reaction 0 assignees View on GitHub
area: cdk/observers P3 regression
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Reproduction
Steps to reproduce:
1. Write this code in a service, then subscribe. See in console.
```
isLandscape$: Observable = this.breakpointObserver.observe(['(orientation: portrait)', '(orientation: landscape)']).pipe(
map((result: BreakpointState) => {
console.log('result', result);
return result.matches;
})
);
screenSizes$: Observable = this.breakpointObserver
.observe([Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])
.pipe(
map((result: BreakpointState) => {
console.log('result', result);
return result.matches;
})
);
```

#### Expected Behavior

What behavior were you expecting to see?

I'm expecting to get only 1 condition set to true for media queries defined in the CDK.

#### Actual Behavior

What behavior did you actually see?

My browser is 1903px wide. The 1st time i load the page, I see in the console the Large and XLarge conditions set to true:

```
(min-width: 1280px) and (max-width: 1919.99px): true
(min-width: 1920px): true
```
Then, when I resize my window, this time, the CDK emits only `(min-width: 1280px) and (max-width: 1919.99px): true`.

The same type of error occurs screen when I first get to 'xs' screen by resizing the window: 2 conditions set to true (for Small & XSmall screen sizes):

```
(max-width: 599.99px): true
(min-width: 600px) and (max-width: 959.99px): true
```
Then, when I resize again my window, i only get `(max-width: 599.99px): true`.

ALSO:

When i reload the page in 'xs' size, I get the right values set for both isLandscape & Screen size.
But when i resize the page, I get:
```
breakpoints: {
(orientation: landscape): false
(orientation: portrait): false
}
matches: false
```
I also get a no match from times to times for the screen sizes...

So, that's just not possible.
- The CDK should be able to emit that I'm still in portrait mode,
- the CDK should be able to detect my screen size any time.

#### Environment

- Angular: 8.0.0
- CDK/Material: 8.0.0
- Browser(s): Chrome 76
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

Contributor guide

Open the contributing guide

Research direction

Start with the BreakpointObserver usage shown in the reproduction and run it at the reported viewport sizes in Angular 8. Compare the initial and resize emissions for orientation and screen-size queries. Done means each viewport reports the correct matching conditions consistently without transient duplicate or no-match results.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.