Closed m-natarajan closed 1 month ago
Triggered auto assignment to @miljakljajic (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.
Pressing Tab in the magic code screen does not move to next magic code input
We don't handle Tab press on onKeyPress
on MagicCodeInput
here, so it still default behavior to move to the next element
Add Tab key press logic on onKeyPress
on MagicCodeInput
here to move to next part of the magic code input
else if (keyValue === 'Tab' && focusedIndex !== undefined) {
const newFocusedIndex = focusedIndex + 1;
if (newFocusedIndex !== maxLength) {
if (event.preventDefault) {
event.preventDefault();
}
setInputAndIndex(newFocusedIndex);
inputRefs.current?.focus();
}
}
RESULT
https://github.com/user-attachments/assets/398bec0c-dc57-48e6-a502-348a946b99d9
@miljakljajic Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!
@miljakljajic Still overdue 6 days?! Let's take care of this!
@miljakljajic 6 days overdue. This is scarier than being forced to listen to Vogon poetry!
@miljakljajic Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!
@miljakljajic this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!
@miljakljajic 12 days overdue now... This issue's end is nigh!
Job added to Upwork: https://www.upwork.com/jobs/~01cf3849877e81009e
Triggered auto assignment to Contributor-plus team member for initial proposal review - @ishpaul777 (External
)
The cursor jumps to Didn't receive a magic code? if 30 sec elapses or sign in button
The magic code input actually has only 1 input https://github.com/Expensify/App/blob/032a8fc433aea38533ad6f99acd74f5c8f2de0a4/src/components/MagicCodeInput.tsx#L368
The 6 fields are View with manual focus highlighting behavior https://github.com/Expensify/App/blob/032a8fc433aea38533ad6f99acd74f5c8f2de0a4/src/components/MagicCodeInput.tsx#L401
So when tabbing, it will just move directly to buttons below.
We need to manually handle the tabbing behavior, just like we did for arrow keys. So in https://github.com/Expensify/App/blob/032a8fc433aea38533ad6f99acd74f5c8f2de0a4/src/components/MagicCodeInput.tsx#L335, we can add
else if (keyValue === 'Tab' && focusedIndex !== undefined) {
const newFocusedIndex = event.shiftKey ? focusedIndex - 1 : focusedIndex + 1;
if (newFocusedIndex >= 0 && newFocusedIndex < maxLength) {
setInputAndIndex(newFocusedIndex);
inputRefs.current?.focus();
event?.preventDefault && event.preventDefault();
}
}
If the user presses tab, it's forward navigation and the new focused index will be the one on the right, otherwise. If the user presses shift also, it's backward tabbing and the one we should focus next would be the one on the left.
If the new index is within range, we prevent default and focus on that index, if it's not in range, that means the user wants to navigate outside of the magic code inputs and we should do nothing and let the browser handle the rest.
We can check and possibly handle other key combination with Tab
too, ie. Ctrl + Tab should do nothing
Thanks for your proposals @nyomanjyotisa @daledah.
Proposal from @daledah looks most complete to me, lets assign them π
π π π
Triggered auto assignment to @srikarparsi, see https://stackoverflow.com/c/expensify/questions/7972 for more details.
@miljakljajic, @srikarparsi, @ishpaul777 Eep! 4 days overdue now. Issues have feelings too...
waiting for final proposal review cc @srikarparsi
Looks good to me as well, thanks for the bump
π£ @ishpaul777 π An offer has been automatically sent to your Upwork account for the Reviewer role π Thanks for contributing to the Expensify app!
π£ @daledah You have been assigned to this job! Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review π§βπ» Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs! Keep in mind: Code of Conduct | Contributing π
Is this one coming up for payment this week? I noticed the PR was deployed to prod, but seems like the automation has failed
Yes, I believe so thank you @miljakljajic
@daledah it doesn't look like you've applied to the job on upwork. Can you please either apply or share your upwork profile so we can get an offer sent to you?
@ishpaul777 has been paid - we can close this out when we hear from @daledah - please share your profile or apply to the job.
@miljakljajic, @srikarparsi, @ishpaul777, @daledah Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!
Update above melvin https://github.com/Expensify/App/issues/45416#issuecomment-2312312310
@miljakljajic Here's my profile https://www.upwork.com/freelancers/~0138d999529f34d33f, could you help send the offer? Thx
@daledah 's offer here: https://www.upwork.com/nx/wm/offer/103795834
@miljakljajic I accepted it
Paid!
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.6-4 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: @dylanexpensify Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1721030930518949
Action Performed:
Tab
keyExpected Result:
The cursor moves to the next input for magic code
Actual Result:
The cursor jumps to Didn't receive a magic code? if 30 sec elapses or
sign in
buttonWorkaround:
unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
Screenshots/Videos
https://github.com/user-attachments/assets/85086f25-0e28-42a9-8eb8-f73d68f6332f
View all open jobs on GitHub
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @ishpaul777