App
App copied to clipboard
Expensify
[$1000] iPad - UI Inconsistency of the popover menus - reported by @Santhosh-Sellavel
If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!
Action Performed:
- Open app
- Navigate to "+"
- Select any option
Expected Result:
Upon selection, full button should be highlighted. Either options should look like as it is desktop or buttons should be clickable for full width.
Actual Result:
Button is not fully highlighted
Additional areas where issue is occurring
- Compose Attachment options
- Call Options
- Message Context Options
- Workspace ( Three dots) More Menu Options
- Add Payment Options
- Add/Edit Photo Options for Workspace & User Profile.
- Transfer Balance Options
Workaround:
unknown
Platform:
Where is this issue occurring?
- iOS
Version Number: 1.1.32-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
https://user-images.githubusercontent.com/43995119/150906959-44d501c9-3428-494f-bc9a-8f11d602c5e8.mp4
Expensify/Expensify Issue URL: Issue reported by: @Santhosh-Sellavel Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1641315894001600
Triggered auto assignment to @Gonals (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.
Triggered auto assignment to @SofiedeVreese (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.
Proposal
Add prop fromSidebarMediumScreen={!this.props.isSmallScreenWidth} to all Popover components, wherever the issue was noticed.
E.g. ReportActionCompose (line 564)
This way, on iPad (which has width around 834px) it will behave as on browser, since it falls in category of medium screens.
This issue has not been updated in over 14 days. eroding to Weekly issue.
This issue has not been updated in over 14 days. eroding to Weekly issue.
This issue has not been updated in over 14 days. eroding to Weekly issue.
This issue has not been updated in over 14 days. eroding to Weekly issue.
This issue has not been updated in over 14 days. eroding to Weekly issue.
This issue has not been updated in over 14 days. eroding to Weekly issue.
This issue has not been updated in over 14 days. eroding to Weekly issue.
This issue has not been updated in over 14 days. eroding to Weekly issue.
This issue has not been updated in over 14 days. eroding to Weekly issue.
This issue has not been updated in over 14 days. eroding to Weekly issue.
Oh shit this one slipped through the cracks bc I was unassigned. @Gonals did you want this pushed externally?
If so I'll assign myself.
Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (Exported)
Triggered auto assignment to @Julesssss (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.
@srdjanrist I don't understand the purpose of your proposed change. Could you please explain what will this prop do?
Hello,
Not seeing code it is hard to see a problem and fix it but I do have a couple of possible solutions. Try setting the button width to Dimensions.get('window').width. Another solution is creating a pressable with a view component inside. Make the view component the size you want. Then when you click the pressable change the view's background color. I would love to help but without code it's quite hard.
Hello @jkgaming88 ,
It is OSS and you can head over to Read.me for more..
Hello @parasharrajat
Fixed the problem. Change width in popoverMenuItem style to Dimensions.get('window').width. The '100%' was causing the issue. This makes the menu item the size of the modal. It will never exceed it. You could set the value to 10,000 and it will still work. I think React Native is thinking 100% width is the size of the initial pop over. This fixes that
https://user-images.githubusercontent.com/79109856/155439735-c7c61a18-7e33-4c89-b8ae-347cd3688c3f.mp4
This is the initial popover I meantioned before. Notice how the width of the popover is the same as the button pre-fix. I do not know why it happened but that is the reason.
@srdjanrist I don't understand the purpose of your proposed change. Could you please explain what will this prop do?
Purpose of fromSidebarMediumScreen is to decide which type of modal will be shown.
If fromSidebarMediumScreen = true POPOVER modal will be shown.
If fromSidebarMediumScreen = false DOCKED modal will be shown.
As we can see on iPad 11 inch, in the side menu, current behavior is to show popover, instead of docked modal. (behavior is similar to what can be seen on web). Also, on the same device, we can see that the screen is split, meaning it shows sidemenu with other reports, and on the right, current report is shown. (again behavior similar to web).
By setting the flag fromSidebarMediumScreen to what I have proposed, we will have consistent behavior, where it will always show popover, instead of docked modal.
This can be seen on the following images.
Current behavior:
Proposed fixed behavior:
Ok Sounds good @srdjanrist . I like @srdjanrist 's proposal.
cc: @Julesssss
:ribbon: :eyes: :ribbon: C+ reviewed
fyi @Julesssss let me know if you're happy to proceed with @srdjanrist 's proposal!
📣 @srdjanrist You have been assigned to this job by @Julesssss! Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑💻 Keep in mind: Code of Conduct | Contributing 📖