Terra-core: [terra-breakpoint] breakpoint not set when device orientation changes

[FloraChenCerner]

Bug Report

Description

We found this issue where the application navigation bar doesn't change between tab and menu button when rotating iPad from landscape to portrait or vice versa. I noticed the resize event here is not triggered when changing the orientation, which explains why the layout is not updated.

Steps to Reproduce

1. Load an iOS app, such as PCT, to display a view that should flex when viewport change
2. Change the orientation of the device and observe the layout not changing.

Additional Context / Screenshots

Please refer to the screenshots in https://jira2.cerner.com/browse/PCT-6936

Expected Behavior

Breakpoint should be set when device orientation is changed.

Possible Solution

Based on https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation, it may be resolved by listening to orientationchange event, or handled by css.

Environment

• Component Name and Version: terra-breakpoint
• Browser Name and Version: AppleWebKit/537.36
• Node/npm Version: [e.g. Node 8/npm 5] Node 10 npm 6
• Webpack Version: 4
• Operating System and version (desktop or mobile): iOS 13

@ Mentions

[avinashg1994]

I tired to recreate this issue using https://engineering.cerner.com/terra-dev-site/home as the reference page and viewing it in iPad view using the chrome debugger and was unable to recreate this issue.
@FloraChenCerner, are you able to recreate this issue on our engineering site?
If possible can you provide a reduced example?

[FloraChenCerner]

@avinashg1994 It can't be recreated in browser because the resized event can be triggered there. It can not be triggered in the wkwebview of an iOS native shell where it's using the apple webkit. If your team doesn't have an iOS shell app you may use PCT, or the platform's shell app

[ShettyAkarsh]

@FloraChenCerner so is this issue only during the landscape mode like primary navigation tabs should display in landscape but still it is in Menu view ? like you try move from Portrait to landscape mode. we tried the same using our terra-UI page in ipad but it works fine.
so could you just share your js component code link. so that it would be helpfull for us in the further investigation.

[FloraChenCerner]

@ShettyAkarsh If you try it in the terra UI page in safari on an ipad it will work. It's not working with the native ios shell, which is using webkit. It doesn't work when it's rotating from portrait to landscape or vise versa. Here is the code of our application: https://github.cerner.com/ion-chart/powerchart-touch-js where we are using orion-clinical-application: https://github.cerner.com/ion-chart/powerchart-touch-js/blob/master/src/powerchart-touch/components/PowerChartTouchContainer.jsx#L31

[emilyrohrbough]

@FloraChenCerner You don't want to link out internal src code on open source.

[FloraChenCerner]

@emilyrohrbough ok @ShettyAkarsh was asking me to share the js component code link. What's the standard of sharing that?

[ShettyAkarsh]

@FloraChenCerner you could send the link through mail

[ShettyAkarsh]

@FloraChenCerner do you have a gif created which shows the above issue in ipad using pct ? we tried reproducing the issue using the above js component code in ipad. but there were some errors where we were not able to proceed. it will be helpfull if you could try to recreate this issue using the same above js component code with ipad and share the screens through mail or teams.

[FloraChenCerner]

@ShettyAkarsh Sent an email with a video to you and @avinashg1994

[ShettyAkarsh]

@FloraChenCerner thanks for sending the video. so were you able to try rendering your powerchart touch js component in ipad using browser to see if the issue exists ?

[FloraChenCerner]

@ShettyAkarsh Please see my previous comment: https://github.com/cerner/terra-core/issues/2911#issuecomment-607873367

[benbcai]

This issue can also be recreated using the orion-ios-test-app, which can render the application navigation.

• Without fix
  This gif shows the application navigation inside an iOS shell app. Notice that the resize event does not get triggered when the orientation changes from portrait to landscape or vice versa. Therefore the active breakpoint does not get updated and remains unchanged. As a result, the breakpoint is always medium and the navigation tabs are not displayed when they should be in larger breakpoints.
  

• With fix by listening to the orientationchange event
  Notice the navigation tabs are rolled up into the menu when the active breakpoint is medium in portrait and displayed as tabs when the active breakpoint changes to large after rotating to landscape.