[HOLD for payment 2024-07-24] [$250] LHN popover - Desktop: 'Mark as unread' action for top chat has blank area to highlight

@trjExpensify

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: 9.0.4-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: N/A
Email or phone of affected tester (no customers):
Issue reported by: Applause - Internal Team

Issue found when excuting PR #44519

Action Performed:

Precondition: user is logged in desktop application.

LHN > top chat
Right mouse button click to display popover
Move cursor to 'Mark as unread' option and around it

Expected Result:

When cursor cross edge between Pin/Unpin action and Mark as unread, the last on is highlighted

Actual Result:

When cursor cross edge between Pin/Unpin action and Mark as unread, the last on is highlighted only if cursor pointed on text

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6534069_1720185082592.desktop_mark_as_unread.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01b8144a4f008be2ea
Upwork Job ID: 1810711799577959200
Last Price Increase: 2024-07-09
Automatic offers:

situchan | Reviewer | 103052551

Issue Owner

Current Issue Owner: @trjExpensify

@trjExpensify

Triggered auto assignment to @trjExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

Proposal

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

The mark as unread action item isn't clickable when it's at the top of the screen.

What is the root cause of that problem?

On the desktop, we have a drag area to mark that the element is draggable.

App/web/index.html

Lines 42 to 46 in c5eafd3

    
           [data-drag-area='true'] { 
        
               -webkit-app-region: drag; 
        
           } 
        
           [data-drag-area='false'], [data-drag-area='true'] [data-tag="pressable"] { 
        
               -webkit-app-region: no-drag;

In our case, the top bar area is draggable.

App/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx

Lines 41 to 44 in c5eafd3

    
           <View 
        
               style={[styles.flexRow, styles.gap4, styles.mh3, styles.mv5, styles.alignItemsCenter, styles.justifyContentBetween]} 
        
               dataSet={{dragArea: true}} 
        
           >

When the mark as unread action item is within the draggable area, the item won't receive a mouse event anymore. We already have a CSS as shown above to always disable the draggable of a pressable if it's the children of a draggable area, but in our case, the pressable is inside a popover.

This also happens to report context menu items.

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

Make the popover to be not draggable. We can apply dataSet={{dragArea: false}} to the popover container view.

App/src/components/PopoverWithoutOverlay/index.tsx

Lines 121 to 127 in c5eafd3

    
           return ( 
        
               <View 
        
                   style={[modalStyle, {zIndex: variables.popoverzIndex}]} 
        
                   ref={viewRef(withoutOverlayRef)} 
        
                   // Prevent the parent element to capture a click. This is useful when the modal component is put inside a pressable. 
        
                   onClick={(e) => e.stopPropagation()} 
        
               >

This will apply for all popover, but if we only want for the LHN and report context menu, then we can apply it to PopoverReportActionContextMenu.

we can optionally do this for BaseModal too

OR

Set all pressable to be non-draggable

App/web/index.html

Lines 45 to 48 in c5eafd3

    
           [data-drag-area='false'], [data-drag-area='true'] [data-tag="pressable"] { 
        
               -webkit-app-region: no-drag; 
        
           }

@fedirjh

@fedirjh, looks like this is coming from #44519 as a regression. Can you review the above please, and then we should assign the same peeps (you and Bernhard) to fix/review it.

@trjExpensify

@trjExpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

@trjExpensify

looks like this is coming from #44519 as a regression.

@trjExpensify This is not a regression from #44519, It's already replicated in production, and #44519 hasn’t hit prod yet.

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

@bernhardoj

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.7-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

Fix some part of popover isn't clickable when near the desktop header #45135

If no regressions arise, payment will be issued on 2024-07-24. 🎊

For reference, here are some details about the assignees on this issue:

@bernhardoj requires payment through NewDot Manual Requests
@situchan requires payment automatic offer (Reviewer)

@situchan

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@situchan] The PR that introduced the bug has been identified. Link to the PR:
[@situchan] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
[@situchan] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
[@situchan] Determine if we should create a regression test for this bug.
[@situchan] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[@trjExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

Payment is due today. Requested in ND.

@situchan

Checklist time, @situchan.

This is not regression but newly caught bug.

As desktop-only and minor bug, I don't think this is worth adding to regression test.

This is not regression but newly caught bug.

What does that mean? 😅

No offending PR I mean 😄

You're saying this bug has been there since we implemented this popover? 😕

This bug has been there since we implemented draggable area on desktop in #24098

Got it, so that's the offending PR isn't it?

@bernhardoj

Payment summary as follows:

$250 to @bernhardoj for the fix (requested via NewDot)
$250 to @situchan for the review (paid via Upwork!)

Paid, closing!

@bernhardoj

$250 approved for @bernhardoj

Navigation Menu

Repository navigation

[HOLD for payment 2024-07-24] [$250] LHN popover - Desktop: 'Mark as unread' action for top chat has blank area to highlight #44928

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

19 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	[data-drag-area='true'] {
	-webkit-app-region: drag;
	}
	[data-drag-area='false'], [data-drag-area='true'] [data-tag="pressable"] {
	-webkit-app-region: no-drag;

	<View
	style={[styles.flexRow, styles.gap4, styles.mh3, styles.mv5, styles.alignItemsCenter, styles.justifyContentBetween]}
	dataSet={{dragArea: true}}
	>

	return (
	<View
	style={[modalStyle, {zIndex: variables.popoverzIndex}]}
	ref={viewRef(withoutOverlayRef)}
	// Prevent the parent element to capture a click. This is useful when the modal component is put inside a pressable.
	onClick={(e) => e.stopPropagation()}
	>

[HOLD for payment 2024-07-24] [$250] LHN popover - Desktop: 'Mark as unread' action for top chat has blank area to highlight #44928

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jul 5, 2024

bernhardoj commented on Jul 6, 2024

Proposal

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

What is the root cause of that problem?

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

trjExpensify commented on Jul 8, 2024

melvin-bot commented on Jul 8, 2024

fedirjh commented on Jul 9, 2024

melvin-bot commented on Jul 9, 2024

19 remaining items

melvin-bot commented on Jul 17, 2024

melvin-bot commented on Jul 17, 2024

bernhardoj commented on Jul 24, 2024

trjExpensify commented on Jul 24, 2024

situchan commented on Jul 24, 2024

trjExpensify commented on Jul 24, 2024

situchan commented on Jul 24, 2024

trjExpensify commented on Jul 24, 2024

situchan commented on Jul 24, 2024

trjExpensify commented on Jul 24, 2024

trjExpensify commented on Jul 24, 2024

JmillsExpensify commented on Jul 26, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions