[HOLD #32800] [$500] Compose Box - User is able to access compose box while side panel is open #34139

lanitochka17 · 2024-01-09T13:59:50Z

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

Version Number: 1.4.23-0
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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Open a workspace with an IOU
Click on the IOU preview component
Click on the tab button on keyboard multiple times until it reaches the compose box
Type anything and send

Expected Result:

User should not be able to access compose box while side panel is open

Actual Result:

User is able to type and send messages while side panel is open

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6336714_1704808020648.sidepanel.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~014f05f042b5d4262d
Upwork Job ID: 1744720652723343360
Last Price Increase: 2024-03-26

melvin-bot · 2024-01-09T13:59:55Z

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

melvin-bot · 2024-01-09T13:59:55Z

Job added to Upwork: https://www.upwork.com/jobs/~014f05f042b5d4262d

melvin-bot · 2024-01-09T14:00:01Z

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

shahinyan11 · 2024-01-09T14:03:01Z

Proposal

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

Compose Box - User is able to access compose box while side panel is open

What is the root cause of that problem?

We do not disable compose when RHP is open

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

Add IsComposeDisabled in state of ReportScreen component and change it to true when the screen blurs and set to false when the screen is focusing.
Add shouldDisableCompose={IsComposeDisabled} prop for ReportFooter component in ReportScreen

What alternative solutions did you explore? (Optional)

Write new util which will get the current route and check if it is in RHP then returns true. And us it in ReportActionCompose component for ComposerWithSuggestions

tienifr · 2024-01-09T14:10:38Z

Proposal

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

User is able to type and send messages while side panel is open

What is the root cause of that problem?

We do not have the logic to focus on the RHP, so we're still focus on the report page, that why when users press tab, the first focusable component in report page is focus

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

we should implement the focus trap component for RHP by using focus-trap-react library

What alternative solutions did you explore? (Optional)

When the RHP is opened, we can programmatically focus on the RHP

Krishna2323 · 2024-01-09T16:29:33Z

Proposal

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

Compose Box - User is able to access compose box while side panel is open

What is the root cause of that problem?

We do not have a logic to disable the composer when RPH is open.

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

We already have a function to check the visibility of the composer, we just need to add !checkComposerVisibility() to the value of the isDisabled prop inside ComposerWithSuggestions.

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js

Lines 431 to 435 in 8925a89

    
           const checkComposerVisibility = useCallback(() => { 
        
               // Checking whether the screen is focused or not, helps avoid `modal.isVisible` false when popups are closed, even if the modal is opened. 
        
               const isComposerCoveredUp = !isFocused || EmojiPickerActions.isEmojiPickerVisible() || isMenuVisible || modal.isVisible || modal.willAlertModalBecomeVisible; 
        
               return !isComposerCoveredUp; 
        
           }, [isMenuVisible, modal, isFocused]);

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js

Line 556 in 8925a89

isDisabled={isBlockedFromConcierge || disabled}

Updated Code: isDisabled={isBlockedFromConcierge || disabled || !checkComposerVisibility()}