[HOLD for payment 2023-07-12] [$1000] The Keyboard shortcuts modal does not render correctly when the window is resized.

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Opened the Website.
2. Navigated to the Settings page, then to the About page.
3. Clicked on "View keyboard shortcuts".
4. Decreased the window size.
5. Maximized the browser window.
6. Observed that the Keyboard shortcuts modal is not in the center of the page.

Expected Result:

The Keyboard shortcuts modal should be in the center of the page.

Actual Result:

The Keyboard shortcuts modal does not render correctly when the window is resized.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.32-5
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-06-21.at.2.58.59.AM.mov

Recording.882.mp4

Expensify/Expensify Issue URL:
Issue reported by: @Tushu17
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1687297558102969

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a27dd51f1042e7a5
• Upwork Job ID: 1673922198285770752
• Last Price Increase: 2023-06-28

[GItGudRatio]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The Keyboard shortcuts modal does not render correctly when the window is resized from small screen to large screen.

What is the root cause of that problem?

To reproduce this issue, just going from a small width to a large width while the modal is open also causes this issue to happen. Further, we can notice that a console error is thrown in DEV when the resizing happens.

The reason behind this issue is that when the browser is in large screen width, it has the CSS property flexBasis: auto and flex: 1. Both these values are obtained from here:

• App/src/styles/styles.js

  Line 3001 in ae8a751

  flexBasis: 'auto',

• App/src/styles/getModalStyles/getBaseModalStyles.js

  Line 116 in b8d4576

  flex: 1,

When the window is resized to small screen width, it obtains the styles from modal type BOTTOM_DOCKED, which do not have a flex CSS property set. This leads to a situation where the flex style is removed while the flexBasis style is present, causing the visual glitch to occur. Similarly, when the window is resized to large width, the flex style is set from being undefined, causing the issue to occur,

What changes do you think we should make in order to solve the problem?

Ideally, we do not want to change the base styles for the popovers. Taking this into consideration, we can change the style keyboardShortcutModalContainer to use flex: 0 and remove flexShrink and flexGrow. This will ensure that no matter the width, the flex style is always taken into consideration. After resolution, the style will always be set to flex: 0 0 auto.

What alternative solutions did you explore? (Optional)

To fix this issue, we can add flex: 1 style to the BOTTOM_DOCKED modal type in modalContainerStyle.
Alternatively, we can remove flex: 1 style from CENTERED_UNSWIPEABLE modal type from getBaseModalStyles.

[melvin-bot]

Triggered auto assignment to @tjferriss (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[Pujan92]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The Keyboard shortcuts modal does not render correctly when the window is resized.

What is the root cause of that problem?

Warning: Updating a style property during rerender (flex) when a conflicting property is set (flexShrink) can lead to styling bugs. To avoid this, don't mix shorthand and non-shorthand properties for the same value; instead, replace the shorthand with separate values.
As the error mentions don't mix the shorthand and no-shorthand properties and seems that we are doing here(where modalContainerStyle contains shorthand property flex: 1 and innerContainerStyle has properties of keyboardShortcutModalContainer which are non-shorthand).

App/src/styles/getModalStyles/getBaseModalStyles.js

Line 252 in 1a2072f

modalContainerStyle = {...modalContainerStyle, ...innerContainerStyle};

App/src/components/KeyboardShortcutsModal.js

Line 159 in d76b1ad

innerContainerStyle={{...styles.keyboardShortcutModalContainer, ...StyleUtils.getKeyboardShortcutsModalWidth(this.props.isSmallScreenWidth)}}

App/src/styles/styles.js

Lines 2998 to 3003 in d76b1ad

	keyboardShortcutModalContainer: {
	maxHeight: '100%',
	flexShrink: 0,
	flexGrow: 0,
	flexBasis: 'auto',
	},

What changes do you think we should make in order to solve the problem?

As for the modal container type we are using the flex shorthand syntax here, let's do the same for the keyboardShortcutModalContainer to avoid this conflict issue. This raises the issue for the native, so we need to replace shorthand with the normal properties in the getBaseModalStyles.

Instead of

App/src/styles/getModalStyles/getBaseModalStyles.js

Line 81 in ecfcd83

flex: 1,

App/src/styles/getModalStyles/getBaseModalStyles.js

Line 116 in ecfcd83

flex: 1,

Update to

flexShrink: 1,
flexGrow: 1,
flexBasis: 0,

Result

Screen.Recording.2023-06-27.at.3.51.20.AM.mp4

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01a27dd51f1042e7a5

[tjferriss]

I'm able to reproduce this one.

[melvin-bot]

Current assignee @tjferriss is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @0xmiroslav (External)