Automatic update of display orientation does not work properly when turning devices

[eluebbec]

Environment

Tech	Version
@material-ui/pickers	3.2.0
material-ui	4.1.3
React	16.8
Browser	Safari on iOS, chrome (and samsung internet) on Android
Peer library	moment 2.24.0

Steps to reproduce

I first observed a crash on iOS devices when turning them into landscape mode. While analyzing that I found a small further issue on Android devices that is caused by the same lines of code. That's why I describe the two observations in the following:

Observation 1

1. Use a DatePicker component
2. Open it on an iPad or iPhone
3. turn the device to landscape mode

Observation 2

1. Use a DatePicker component
2. Open it on an Android device
3. turn the device to upside down landscape mode

Expected behavior

The DatePicker is shown without an error, preferably as landscape variant.

Actual behavior

Observation 1

An error is thrown: "TypeError: undefined is not an object (evaluating 'window.screen.orientation.angle')"

It seems that the window.screen.orientation api is not supported by iOS Safaris. The code checks that window.screen and window.orientation are available but not that window.screen.orientation is available before accessing it. (see getOrientation in useIsLandscape.tsx)

Observation 2

On android devices the DatePicker is shown as portrait variant in upside down orientation instead of landscape variant like in regular landscape.

It seems that window.screen.orientation equals 270 in upside down landscape instead of -90 as expected. So the check does not apply correctly.

Live example

Sorry, I don't have one :(

[chriswardo]

+1

This is happening in my iOS app too.

[jehillert]

Not sure if this is the right spot to post this. Live example of the error can be found at:

timelockr (hosted on AWS))

The error did not show on my older devices, an iPad Air II and an iPhone 6s Plus. It did show up on a newer iPad Pro and a newer generic iPad tablet (I can get the model numbers if needed). This link shows how to reproduce the error in the app:
reproducing_error

This link shows the output of the React ErrorBoundary surrounding the time-picker components during runtime:
error_at_runtime

The relevant code is as follows:

• EntryFormDialog.jsx (see lines 164-177)
• TimePicker.jsx
• DatePicker.jsx

[jehillert]

If you want to reproduce the error in the app on your end, I have added a .env file that will let you run the client without having to install the backend. The repo is here:
https://github.com/jehillert/timelockr-client.git

[dmtrKovalenko]

I have already fixed it. It will be published tomorrow

[jehillert]

Sweet. You guys rock!

[eluebbec]

Hey @dmtrKovalenko ,

thanks for that fast fix!

I had a look into it and just observed that it does not tackle the second problem. On my android devices window.screen.orientation.angle is 270 instead of -90 in upside down landscape mode. Hence, your method would return 'protrait' instead of 'landscape'. Don't know, if that differs on distinct devices. A modulo 180 check would ensure the correct result, I guess. Is it possible to add that as well?

[dmtrKovalenko]

Ohh goodness