-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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
[HOLD for payment 2023-10-10] [$1000] Task description label stays on top #22204
Comments
Triggered auto assignment to @michaelhaxhiu ( |
Bug0 Triage Checklist (Main S/O)
|
ProposalPlease re-state the problem that we are trying to solve in this issue.Task description label stays on top What is the root cause of that problem?App/src/components/TextInput/BaseTextInput.js Lines 25 to 39 in 7e908b1
Problem is we don't update refs and values on Focus of screen. When value removed by other page and we go back TaskDetails page stay mounted. thus BaseTextInput doesn't know it has to update label position. it just calculate on Mount currently.
What changes do you think we should make in order to solve the problem?I found a good solution. App/src/components/TextInput/BaseTextInput.js Lines 186 to 198 in cd09dc9
We can just update const hasValueRef = useRef(inputValue.length > 0);
useEffect(() => {
const hasValue = !!props.value
if (inputValue !== props.defaultValue || hasValue) {
hasValueRef.current = props.value && props.value > 0;
}
}, [props.value, inputValue, props.defaultValue]) It will activate/deactivate label properly Videovid.movWhat alternative solutions did you explore? (Optional)We can use useFocusEffect(useCallback(() => {
// return early if ref and prop value is same or input is focused
if (isLabelActive.current === initialActiveLabel || isFocused) return;
hasValueRef.current = inputValue.length > 0;
isLabelActive.current = initialActiveLabel
if (initialActiveLabel) {
activateLabel();
} else {
deactivateLabel();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [initialActiveLabel, inputValue,isFocused])) |
Yes thx for pinging me, I will look in a few hours into this! |
Looking into it now |
I do think I found a clean solution (note: I am the author of the original PR that caused the regression 😅 ): ProposalPlease re-state the problem that we are trying to solve in this issue.In our code we use uncontrolled and controlled What is the root cause of that problem?Currently we are deciding on whether to deactivate the label based on two criteria:
In the second criteria lies the root cause. When we update the What changes do you think we should make in order to solve the problem?Right now we have a Before we were thinking we can't use the // We capture whether the input has a value or not in a ref.
// We need this information in case the component
// is uncontrolled (i.e. no value prop is supplied)
const hasValueRef = useRef(initialValue.length > 0);
const inputValue = props.value || '';
const hasValue = inputValue.length > 0 || hasValueRef.current;
// Activate or deactivate the label when either focus changes, or for controlled
// components when the value prop changes:
useEffect(() => {
if (hasValue || isFocused) {
activateLabel();
} else if (!hasValue && !isFocused) {
deactivateLabel();
}
}, [activateLabel, deactivateLabel, hasValue, isFocused]); This change also makes the code cleaner as now we can get rid of this App/src/components/TextInput/BaseTextInput.js Lines 171 to 182 in a6ae94d
What alternative solutions did you explore? (Optional)I had a look at the previous two proposals. Here are my notes (please note that they are meant completely judge free, we are just striving for the best possible solutions, and your guys' proposals were a great help in finding the final solution I came up with, so big thanks here 🙌 )
Screen.Recording.2023-07-06.at.10.51.29.mov |
Looks like something related to As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our Feel free to drop a note in #expensify-open-source with any questions. |
@michaelhaxhiu Uh oh! This issue is overdue by 2 days. Don't forget to update your issues! |
@michaelhaxhiu Still overdue 6 days?! Let's take care of this! |
Job added to Upwork: https://www.upwork.com/jobs/~017f8f2919130b85b3 |
Current assignee @michaelhaxhiu is eligible for the External assigner, not assigning anyone new. |
Triggered auto assignment to Contributor-plus team member for initial proposal review - @abdulrahuman5196 ( |
@hannojg has given some great context above on the origin story. I'm not sure if we should just assign Hanno to see it through at this point? Thoughts @abdulrahuman5196 ? |
If we want group input, let's feel inclined to post on the ongoing slack thread here (and post to channel) https://expensify.slack.com/archives/C049HHMV9SM/p1688400346545699 |
Will look into this in couple of hours |
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸 |
just dm'ed @abdulrahuman5196 and hoping for some eyes on this soon! |
We have been waiting on @hannojg to solve merge conflicts |
This isn't done yet, but it's progressing. I'm preparing to go OOO by end of the week for my sabbatical, so I'm going to remove my assignment and leave this with @muttmuure. Next steps are similar to before, but we are closer :)
|
PR is resolved and working now 👍 |
fix(#22204): Toggle label correctly
|
The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.76-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue: If no regressions arise, payment will be issued on 2023-10-10. 🎊 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.
For reference, here are some details about the assignees on this issue:
As a reminder, here are the bonuses/penalties that should be applied for any External issue:
|
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:
|
No. Not beneficial to add regression test for this minor bug |
@hannojg, @abdulrahuman5196, @muttmuure, @hayata-suenaga Eep! 4 days overdue now. Issues have feelings too... |
seems we don't need regression test are we paying for payment? |
@muttmuure Gentle ping on payment processing. Waiting for over a week. |
Looking now |
$1000 - C+ @abdulrahuman5196 |
Invited to Upwork job |
@muttmuure accepted |
Paid |
@muttmuure |
Invited! |
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:
Expected Result:
Description label should be placed inside textfield if it’s empty
Actual Result:
Description label is floating over textfield (as it has some text in it, but there is no data inside textfield )
Workaround:
Can the user still use Expensify without this being fixed? Have you informed them of the workaround?
Platforms:
Which of our officially supported platforms is this issue occurring on?
Version Number: 1.3.36-3
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
Notes/Photos/Videos: Any additional supporting documentation
RPReplay_Final1688399438.mp4
XXFM1942.1.MP4
Expensify/Expensify Issue URL:
Issue reported by: @DinalJivani
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1688400346545699
View all open jobs on GitHub
Upwork Automation - Do Not Edit
The text was updated successfully, but these errors were encountered: