[HOLD for payment 2023-07-17] [$1000] Web- Eye icon position not aligned and nothing happen on click of eye icon #22183

kbecciv · 2023-07-04T14:52:23Z

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

Action Performed:

Go to any chat
Click on + icon and select Add attachment option
Select password protected PDF
Click on enter password button
Click on eye icon

Expected Result:

Should show password on click of eye icon

Actual Result:

Eye icon position not aligned and nothing happen on click of eye icon

Workaround:

Unknown

Platforms:

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

Version Number: 1.3.36-2
Reproducible in staging?: n/a
Reproducible in production?: n/a
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
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-07-04.at.4.57.49.PM.mov

Expensify/Expensify Issue URL:
Issue reported by: @gadhiyamanan
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1688470270928489

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0175d4f2d46ea957ec
Upwork Job ID: 1676995758027735040
Last Price Increase: 2023-07-06

melvin-bot · 2023-07-04T14:52:28Z

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

melvin-bot · 2023-07-04T14:52:30Z

Bug0 Triage Checklist (Main S/O)

This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

Nikhil-Vats · 2023-07-04T15:40:06Z

Proposal

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

Eye icon position is not aligned and nothing happens on click of eye icon in password protected PDF form.

What is the root cause of that problem?

styles.flex1 was removed from the container of eye icon in this PR which is why the icon is not in center anymore.

App/src/components/TextInput/BaseTextInput.js

Lines 348 to 360 in 3e0d7dd

    
           {Boolean(props.secureTextEntry) && ( 
        
               <Checkbox 
        
                   style={styles.textInputIconContainer} 
        
                   onPress={togglePasswordVisibility} 
        
                   onMouseDown={(e) => e.preventDefault()} 
        
                   accessibilityLabel={props.translate('common.visible')} 
        
               > 
        
                   <Icon 
        
                       src={passwordHidden ? Expensicons.Eye : Expensicons.EyeDisabled} 
        
                       fill={themeColors.icon} 
        
                   /> 
        
               </Checkbox> 
        
           )}

Nothing happens on clicking of eye icon since we are calling the setPasswordHidden in togglePasswordVisibility in the wrong way. prevState is not an object but is instead the current value of passwordHidden.

App/src/components/TextInput/BaseTextInput.js

Lines 220 to 222 in 3e0d7dd

    
           const togglePasswordVisibility = useCallback(() => { 
        
               setPasswordHidden((prevState) => !prevState.passwordHidden); 
        
           }, []);

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

We need to add styles.flex1 again in line 350 -

style={[styles.flex1, styles.textInputIconContainer]}

For fixing the click behaviour of eye icon, we need to call setPasswordHidden in the correct way in togglePasswordVisibility by not using prevState.passwordHidden and directly using prevState -

We need to simply call it like -

const togglePasswordVisibility = useCallback(() => { 
   setPasswordHidden((prevState) => !prevState); 
}, []);

We can change the name of variable prevState to something else for better understanding.

What alternative solutions did you explore? (Optional)

NA

Result -

Screen.Recording.2023-07-04.at.8.50.55.PM.mov

Nikhil-Vats · 2023-07-04T16:26:40Z

This is a regression from #20186.

OSBotify · 2023-07-06T16:33:08Z

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

melvin-bot · 2023-07-06T16:33:12Z

Triggered auto assignment to @PauloGasparSv (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

Nikhil-Vats · 2023-07-06T16:39:11Z

Hey @Julesssss, can you take a look at my proposal? I have tested it and I can raise a PR right now.

OSBotify · 2023-07-06T16:40:12Z

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

Julesssss · 2023-07-06T16:43:46Z

Thanks @Nikhil-Vats. Your solution looks good to me, I was just trying to decide whether to revert the PR you linked.

I think it's going to be simpler to just work on this fix. So yeah, I'd be happy to assign you to this fix now

melvin-bot · 2023-07-07T10:15:25Z

Reviewing label has been removed, please complete the "BugZero Checklist".

melvin-bot · 2023-07-07T10:15:26Z

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

Fix eye icon bug #22356

If no regressions arise, payment will be issued on 2023-07-14. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

External issue reporter
Contributor that fixed the issue
Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

Merged PR within 3 business days of assignment - 50% bonus
Merged PR more than 9 business days after assignment - 50% penalty

Santhosh-Sellavel · 2023-07-09T19:54:03Z

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:

[@Santhosh-Sellavel] The PR that introduced the bug has been identified. Link to the PR: [Fix #16696] Rewrite BaseTextInput to function component #20186 (comment)

[@Santhosh-Sellavel] 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: [Fix #16696] Rewrite BaseTextInput to function component #20186 (comment)

[@Santhosh-Sellavel] 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: Should be caught based on the checklist

[@Santhosh-Sellavel] Determine if we should create a regression test for this bug. N/A

[@Santhosh-Sellavel] 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. We will have cases to cover this already!

[@michaelhaxhiu] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

cc: @Julesssss Let me know if you differ on any of the above, thanks!

melvin-bot · 2023-07-10T23:46:47Z

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

Fix eye icon bug #22356

If no regressions arise, payment will be issued on 2023-07-17. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

External issue reporter
Contributor that fixed the issue
Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

Merged PR within 3 business days of assignment - 50% bonus
Merged PR more than 9 business days after assignment - 50% penalty

melvin-bot · 2023-07-10T23:46:49Z

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:

[@Santhosh-Sellavel] The PR that introduced the bug has been identified. Link to the PR:
[@Santhosh-Sellavel] 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:
[@Santhosh-Sellavel] 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:
[@Santhosh-Sellavel] Determine if we should create a regression test for this bug.
[@Santhosh-Sellavel] 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.
[@michaelhaxhiu] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

Julesssss · 2023-07-17T12:45:14Z

Ready to be paid I think

Santhosh-Sellavel · 2023-07-17T15:57:42Z

@michaelhaxhiu I will collect via ND

Santhosh-Sellavel · 2023-07-17T15:58:55Z

@Julesssss This qualifies for Bonus too right?

michaelhaxhiu · 2023-07-18T19:50:54Z

@Santhosh-Sellavel yep just checked as part of the BZ payment step, and you are correct.

Let's do payments now!

michaelhaxhiu · 2023-07-18T19:51:26Z

Payments:

$250 External issue reporter @gadhiyamanan
$1500 Contributor that fixed the issue @Nikhil-Vats
$1500 Contributor+ that helped on the issue and/or PR @Santhosh-Sellavel (pay via newdot?)

michaelhaxhiu · 2023-07-18T19:55:43Z

@Santhosh-Sellavel will you require payment via newdot?

Nikhil-Vats · 2023-07-18T19:59:22Z

Offer accepted @michaelhaxhiu.

michaelhaxhiu · 2023-07-18T21:56:39Z

2/3 paid. Just waiting for Santhosh to confirm if he's gonna get paid via upwork or newdot.

Santhosh-Sellavel · 2023-07-18T23:14:14Z

@michaelhaxhiu I will let you know here once done!

michaelhaxhiu · 2023-07-18T23:26:42Z

Please do!

michaelhaxhiu · 2023-07-18T23:26:47Z

I'll check your box last

Santhosh-Sellavel · 2023-07-20T18:29:16Z

Requested on ND

michaelhaxhiu · 2023-07-20T20:25:28Z

Perfect

anmurali · 2023-07-23T07:38:44Z

Approved $1500 to Santhosh based on #22183 (comment)

kbecciv added Daily KSv2 Needs Reproduction Reproducible steps needed Bug Something is broken. Auto assigns a BugZero manager. labels Jul 4, 2023

melvin-bot bot assigned michaelhaxhiu Jul 4, 2023

rain2o mentioned this issue Jul 6, 2023

[$1000] Chat - Tapping eye icon for protected pdf file moves cursor to the start of the field #21727

Closed

6 tasks

kbecciv added DeployBlockerCash This issue or pull request should block deployment and removed Needs Reproduction Reproducible steps needed labels Jul 6, 2023

melvin-bot bot added Overdue labels Jul 6, 2023

kbecciv changed the title ~~Dev: Eye icon position not aligned and nothing happen on click of eye icon~~ Web- Eye icon position not aligned and nothing happen on click of eye icon Jul 6, 2023

github-actions bot removed the Daily KSv2 label Jul 6, 2023

OSBotify mentioned this issue Jul 6, 2023

Deploy Checklist: New Expensify 2023-07-05 #22282

Closed

58 tasks

github-actions bot added Engineering Hourly KSv2 labels Jul 6, 2023

melvin-bot bot assigned PauloGasparSv Jul 6, 2023

Julesssss added DeployBlockerCash This issue or pull request should block deployment and removed DeployBlockerCash This issue or pull request should block deployment labels Jul 6, 2023

Julesssss assigned Julesssss and unassigned PauloGasparSv Jul 6, 2023

melvin-bot bot removed the Overdue label Jul 6, 2023

Julesssss mentioned this issue Jul 6, 2023

[Fix #16696] Rewrite BaseTextInput to function component #20186

Merged

58 tasks

melvin-bot bot removed the Reviewing Has a PR in review label Jul 7, 2023

Expensify deleted a comment from melvin-bot bot Jul 10, 2023

melvin-bot bot added Weekly KSv2 and removed Weekly KSv2 labels Jul 10, 2023

melvin-bot bot added Daily KSv2 Overdue and removed Weekly KSv2 labels Jul 13, 2023

Julesssss changed the title ~~[HOLD for payment 2023-07-17] [HOLD for payment 2023-07-14] [$1000] Web- Eye icon position not aligned and nothing happen on click of eye icon~~ [HOLD for payment 2023-07-17] [$1000] Web- Eye icon position not aligned and nothing happen on click of eye icon Jul 17, 2023

melvin-bot bot removed the Overdue label Jul 17, 2023

michaelhaxhiu closed this as completed Jul 18, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HOLD for payment 2023-07-17] [$1000] Web- Eye icon position not aligned and nothing happen on click of eye icon #22183

[HOLD for payment 2023-07-17] [$1000] Web- Eye icon position not aligned and nothing happen on click of eye icon #22183

kbecciv commented Jul 4, 2023 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Jul 4, 2023

melvin-bot bot commented Jul 4, 2023

Nikhil-Vats commented Jul 4, 2023

Nikhil-Vats commented Jul 4, 2023

OSBotify commented Jul 6, 2023

melvin-bot bot commented Jul 6, 2023

Nikhil-Vats commented Jul 6, 2023

OSBotify commented Jul 6, 2023

Julesssss commented Jul 6, 2023 •

edited

Loading

melvin-bot bot commented Jul 7, 2023

melvin-bot bot commented Jul 7, 2023

Santhosh-Sellavel commented Jul 9, 2023 •

edited by michaelhaxhiu

Loading

melvin-bot bot commented Jul 10, 2023

melvin-bot bot commented Jul 10, 2023

Julesssss commented Jul 17, 2023

Santhosh-Sellavel commented Jul 17, 2023

Santhosh-Sellavel commented Jul 17, 2023

michaelhaxhiu commented Jul 18, 2023

michaelhaxhiu commented Jul 18, 2023 •

edited

Loading

michaelhaxhiu commented Jul 18, 2023

Nikhil-Vats commented Jul 18, 2023

michaelhaxhiu commented Jul 18, 2023

Santhosh-Sellavel commented Jul 18, 2023

michaelhaxhiu commented Jul 18, 2023

michaelhaxhiu commented Jul 18, 2023

Santhosh-Sellavel commented Jul 20, 2023

michaelhaxhiu commented Jul 20, 2023

anmurali commented Jul 23, 2023

[HOLD for payment 2023-07-17] [$1000] Web- Eye icon position not aligned and nothing happen on click of eye icon #22183

[HOLD for payment 2023-07-17] [$1000] Web- Eye icon position not aligned and nothing happen on click of eye icon #22183

Comments

kbecciv commented Jul 4, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

melvin-bot bot commented Jul 4, 2023

melvin-bot bot commented Jul 4, 2023

Bug0 Triage Checklist (Main S/O)

Nikhil-Vats commented Jul 4, 2023

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?

What alternative solutions did you explore? (Optional)

Nikhil-Vats commented Jul 4, 2023

OSBotify commented Jul 6, 2023

melvin-bot bot commented Jul 6, 2023

Nikhil-Vats commented Jul 6, 2023

OSBotify commented Jul 6, 2023

Julesssss commented Jul 6, 2023 • edited Loading

melvin-bot bot commented Jul 7, 2023

melvin-bot bot commented Jul 7, 2023

Santhosh-Sellavel commented Jul 9, 2023 • edited by michaelhaxhiu Loading

melvin-bot bot commented Jul 10, 2023

melvin-bot bot commented Jul 10, 2023

Julesssss commented Jul 17, 2023

Santhosh-Sellavel commented Jul 17, 2023

Santhosh-Sellavel commented Jul 17, 2023

michaelhaxhiu commented Jul 18, 2023

michaelhaxhiu commented Jul 18, 2023 • edited Loading

michaelhaxhiu commented Jul 18, 2023

Nikhil-Vats commented Jul 18, 2023

michaelhaxhiu commented Jul 18, 2023

Santhosh-Sellavel commented Jul 18, 2023

michaelhaxhiu commented Jul 18, 2023

michaelhaxhiu commented Jul 18, 2023

Santhosh-Sellavel commented Jul 20, 2023

michaelhaxhiu commented Jul 20, 2023

anmurali commented Jul 23, 2023

kbecciv commented Jul 4, 2023 •

edited by melvin-bot bot

Loading

Julesssss commented Jul 6, 2023 •

edited

Loading

Santhosh-Sellavel commented Jul 9, 2023 •

edited by michaelhaxhiu

Loading

michaelhaxhiu commented Jul 18, 2023 •

edited

Loading