DylanDylann
commented
1 year ago Proposal
Please re-state the problem that we are trying to solve in this issue.
- Composer: The expand button disappears after you click on the send button
What is the root cause of that problem?
- Currently, clicking on the send button will call the
resetFullComposerSize- which will set theisFullComposerAvailablestate tofalseregardless theisSendDisabledis true or not. That leads to the bug: When the composer has > 15.000 characters, clicking on<SendButton />will make the expand button disappear. This is the RCA that directly lead to this bug. - But the general RCA that leads to this bug or the other like Composer: Clicking on Send button right after clearing input makes the error does not disappear is that: Clicking SendButton or Pressing ENTER button when the
isSendDisableisfalsestill triggers a few functions: For example: https://github.com/Expensify/App/blob/436b75dbd6498c3d76a90efbe542ee7b2fcbc20c/src/pages/home/report/ReportActionCompose/SendButton.js#L36-L49 - In above, clicking on
<SendButton />not only triggersubmitForm, but alsosetIsCommentEmpty,resetFullComposerSizeandupdatePropsPaperWorklet
What changes do you think we should make in order to solve the problem?
- The action pressing on ENTER key or clicking on SendButton has the same role when typing a message but in our app, we handle these two actions separately
- Here is what we do when clicking on SendButton: https://github.com/Expensify/App/blob/436b75dbd6498c3d76a90efbe542ee7b2fcbc20c/src/pages/home/report/ReportActionCompose/SendButton.js#L36-L49
- Here is what we do when pressing on ENTER key: https://github.com/Expensify/App/blob/ae303139f4bc63cb0fe6dfb28ec92b9e9005eba2/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js#L281-L285
-
So we should create a function that handles both clicking send button and pressing ENTER, like below:
const handleClickingOnSendOrPressingEnter = (isSendDisable) => { if (isSendDisable) { return; } else { 'worklet'; const viewTag = animatedRef(); const viewName = 'RCTMultilineTextInputView'; const updates = {text: ''}; // We are setting the isCommentEmpty flag to true so the status of it will be in sync of the native text input state runOnJS(setIsCommentEmpty)(true); runOnJS(resetFullComposerSize)(); updatePropsPaperWorklet(viewTag, viewName, updates); // clears native text input on the UI thread runOnJS(submitForm)(); } }; - If
isSendDisableis true, stop the function so that the bug is fixed and the logic when clicking SendButton or pressing ENTER is clearer
If you could update your proposal so that send button won't be disabled during chat loading, but be disabled only after clicking on it
- We can do that by updating https://github.com/Expensify/App/blob/cfad43ff96f2a104c51fd475e07f0980c4379fcd/src/pages/home/ReportScreen.js#L428-L447 to
<ReportFooter {... currentProps} isReportReadyForDisplay={isReportReadyForDisplay} /> - Then update the
handleClickingOnSendOrPressingEnterin my proposal to:const handleClickingOnSendOrPressingEnter = (isSendDisable, isReportReadyForDisplay) => { if (isSendDisable || !isReportReadyForDisplay) { return; } else { // Hanle submit and clean up logic } }; - The above solution will make sure the Send button won`t be disabled during the chat loading, it still displays as clickable, the composer border still displays with a green border, but clicking on send button will not trigger the submit and clean up logic
What alternative solutions did you explore? (Optional)
- NA
melvin-bot[bot]
kbecciv
akinwale
jliexpensify
robertKozik
hungvu193
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:
Expand button should be visible after clicking Send button
Actual Result:
Expand button disappear after clicking even when composer has error
Workaround:
Unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
Version Number: 1.3.71.5 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
https://github.com/Expensify/App/assets/93399543/ea69cd7e-99b2-47be-abcc-e918e153341f
https://github.com/Expensify/App/assets/93399543/4560eefb-e5fa-4c5f-8d6c-e6e5661a0f5b
Expensify/Expensify Issue URL: Issue reported by: @hungvu193 Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694937956481939 https://expensify.slack.com/archives/C049HHMV9SM/p1695124790291359
View all open jobs on GitHub
Upwork Automation - Do Not Edit