-
Notifications
You must be signed in to change notification settings - Fork 2.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[$500] Keyboard focus is on the "close" button when uploading an attachment #43726
Comments
Triggered auto assignment to @CortneyOfstad ( |
Cannot reproduce in production release. |
ProposalPlease re-state the problem that we are trying to solve in this issue.Keyboard focus is on the "close" button when uploading an attachment What is the root cause of that problem?We introduce focusTrap in #39520 What changes do you think we should make in order to solve the problem?We can remove the new focusTrap and use react native web focusTrap in baseModal which is already there. So we only need to remove App/src/components/Modal/BaseModal.tsx Line 256 in e306af7
Another alternative solution is to include the attachment screen in: include the coresponding attachment modal screen in
|
Job added to Upwork: https://www.upwork.com/jobs/~01ab436ac7382c9793 |
Triggered auto assignment to Contributor-plus team member for initial proposal review - @rojiphil ( |
@CortneyOfstad Uh oh! This issue is overdue by 2 days. Don't forget to update your issues! |
@rojiphil, @CortneyOfstad Whoops! This issue is 2 days overdue. Let's get this updated quick! |
Based on the OP test steps, I am unable to launch the |
@rojiphil I cannot reproduce it anymore, but I found another bug because of the new focusTrap in baseModal: Send an attachment -> edit a report action (keep the focus in compose edit) -> open the attachment -> press back browser back button. Notice the edit composer isn't highlighted. macos-web-d.mp4Maybe there are another bugs too. So my suggestion is, since baseModal (react-native-modal) already has focusTrap in it: We could remove the new focusTrap in baseModal. |
@tsa321 As the raised issue is completely different, it is best to raise it separately and go through the normal assignment process. You can raise this in the |
@CortneyOfstad I think we can close this issue as it is not reproduceable |
Sounds good — thanks @rojiphil! I was not able to reproduce again either! |
This is still happening on staging and production.
Expected behavior - image uploads Actual behaviour - nothing happens, you have to navigate to the send button and click. @CortneyOfstad , if you're unable to reproduce, please swap assignments with me. Thx |
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸 |
@rojiphil, @CortneyOfstad Uh oh! This issue is overdue by 2 days. Don't forget to update your issues! |
@mallenexpensify @CortneyOfstad yes, I can reproduce the issue mentioned here |
@rojiphil , do you think @tsa321 's proposal above will fix the bug? |
@tsa321 |
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸 |
Upwork job price has been updated to $500 |
ProposalPlease re-state the problem that we are trying to solve in this issue.Trigger focus to modal element when the modal is opened What is the root cause of that problem?We have disabled Screen.Recording.2024-07-09.at.10.19.14.movWhat changes do you think we should make in order to solve the problem?While opening the modal, we should trigger focus to expected element in that case at AttachmentModal we can update hook + const { focusRef: submitRef } = useAutoFocusInput();
return (
<>
<Modal
type={modalType}
....
<SafeAreaConsumer>
{({safeAreaPaddingBottomStyle}) => (
<Animated.View style={[StyleUtils.fade(confirmButtonFadeAnimation), safeAreaPaddingBottomStyle]}>
<Button
+ ref={submitRef}
success
large or only focus the modal container due to submit button has listen event pressOnEnter What alternative solutions did you explore? (Optional)We can allow pass props |
Triggered auto assignment to @grgia, see https://stackoverflow.com/c/expensify/questions/7972 for more details. |
Issue not reproducible during KI retests. (First week) |
@mvtglobally This issue still happen on latest staging & production, can not send by "enter" key and text input bellow modal still focus after paste image Screen.Recording.2024-07-11.at.12.05.09.mov |
@rojiphil @CortneyOfstad @grgia this issue is now 4 weeks old, please consider:
Thanks! |
@grgia 👀 on the proposal above plz |
📣 @rojiphil 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app! |
📣 @suneox 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app! Offer link |
I'll create PR in few hours |
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: v1.4.83-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: @quinthar
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1718296177557209
Action Performed:
Expected Result:
Keyboard focus on "Send" button and image sent
Actual Result:
Keyboard focus on cancel button and pressing "enter" on keyboard cancels the upload
Workaround:
Unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
Screenshots/Videos
Add any screenshot/video evidence
![image (8)](https://private-user-images.githubusercontent.com/38435837/339534376-cf27e6b4-1914-4c60-b9a6-17f148f76a10.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjExMzc4NDgsIm5iZiI6MTcyMTEzNzU0OCwicGF0aCI6Ii8zODQzNTgzNy8zMzk1MzQzNzYtY2YyN2U2YjQtMTkxNC00YzYwLWI5YTYtMTdmMTQ4Zjc2YTEwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE2VDEzNDU0OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQxMzAxYWVmOGNiMzViZmExY2ZjNjRmN2VlMzk4ODIwYjM5YjhkOGVhN2M3ZGIwODU2Y2Y5ZTU2ZmIzYWRiNzUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Nve5tc6OrTabf7indwr5jsJqbeZO1p5t8qoVZ59NESs)
Recording.211.mp4
View all open jobs on GitHub
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @grgiaThe text was updated successfully, but these errors were encountered: