Expensify
Android - Chat - Open a new room/WS chat, entering @ does not display user suggestions
If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!
Version Number: 9.0.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: https://expensify.testrail.io/index.php?/tests/view/4704455 Issue reported by: Applause - Internal Team
Action Performed:
- Launch app
- Tap on a workspace or room with no activity
- Enter @ in compose box
- Note user suggestions are not displayed
- Tap on header
- Navigate back to conversation page
- Keep cursor after @ and note now user suggestions are shown
Expected Result:
Open a new room/WS chat, entering @ must display user suggestions
Actual Result:
Open a new room/WS chat, entering @ does not display user suggestions. It is shown only after tapping header and navigate back to conversation
Workaround:
Unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
- [x] Android: Native
- [ ] Android: mWeb Chrome
- [ ] iOS: Native
- [ ] iOS: mWeb Safari
- [ ] MacOS: Chrome / Safari
- [ ] MacOS: Desktop
Screenshots/Videos
Add any screenshot/video evidence
https://github.com/Expensify/App/assets/78819774/34338215-a0aa-47b2-aa13-2be358871e08
Triggered auto assignment to @sonialiap (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.
![melvin-bot[bot] avatar](https://avatars.githubusercontent.com/in/179547?v=4 "Published by a pub.dev verified publisher"){kind=small}
@sonialiap FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors
Job added to Upwork: https://www.upwork.com/jobs/~0180b0b26a5f7f23c0
Triggered auto assignment to Contributor-plus team member for initial proposal review - @ikevin127 (External)
📃 Issue is definitely reproducible, just reproduced on production as well. On local dev the behaviour might be even worse because of the recent introduction of React StrictMode which might interfere with the react-native-live-markdown implementation.
🔍 Looking for proposals!
@sonialiap, @ikevin127 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!
Callback to https://github.com/Expensify/App/issues/45008#issuecomment-2227008347 -> Looking for proposals 🎲
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸
Callback to https://github.com/Expensify/App/issues/45008#issuecomment-2227008347 -> Looking for proposals 🎲
@sonialiap @ikevin127 this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!
@sonialiap, @ikevin127 Whoops! This issue is 2 days overdue. Let's get this updated quick!
Callback to https://github.com/Expensify/App/issues/45008#issuecomment-2227008347 -> Looking for proposals 🎲
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸
@sonialiap, @ikevin127 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!
Callback to https://github.com/Expensify/App/issues/45008#issuecomment-2227008347 -> Looking for proposals 🎲
@sonialiap, @ikevin127 Whoops! This issue is 2 days overdue. Let's get this updated quick!
Callback to https://github.com/Expensify/App/issues/45008#issuecomment-2227008347 -> Looking for proposals 🎲
Proposal
Please re-state the problem that we are trying to solve in this issue.
Open a new room/WS chat, entering @ does not display user suggestions. It is shown only after tapping header and navigate back to conversation.
What is the root cause of that problem?
This is the problem of auto-focus input during screen animated transition/navigation in Android . Below is the explanation of what happening following each reproduction step
-
When we first enter a new blank chat,
shouldAutoFocusistrue. In Android emulator, we can see that the keyboard appear, and we can type in the composer. During typing, this function is triggered, buttextInput.current.isFocused()return false. Hence, theselectionstate here doesn't change, and that means,SuggestionMentioncannot calculate and display the mention box. -
When we click on the chat header and come back, it will by-pass this condition, which means, the input is manually being focused here. And now, since
textInput.current.isFocused()istrue, the suggestion box display normally -
Further note: Instead of clicking on the chat header and navigate back, we can try by pressing the composer box again to re-focus it correctly
What changes do you think we should make in order to solve the problem?
This is a known issue and we have introduced useAutoFocusInput hook to overcome this. We'll just need to apply to the Composer native component instead of leaving the auto-focus management to native TextInput (which is used under the hood by react-native-live-markdown)
Below is the sample code change
// Composer/index.native.tsx
const { inputCallbackRef } = useAutoFocusInput();
useEffect(() => {
if(!autoFocus) {
inputCallbackRef(null);
return;
}
if(textInput.current) {
inputCallbackRef(textInput.current)
}
}, [autoFocus, inputCallbackRef])
/**
* Set the TextInput Ref
* @param {Element} el
*/
const setTextInputRef = useCallback((el: AnimatedMarkdownTextInputRef) => {
// eslint-disable-next-line react-compiler/react-compiler
textInput.current = el;
if (typeof ref !== 'function' || textInput.current === null) {
return;
}
if(autoFocus) {
inputCallbackRef(el);
}
// This callback prop is used by the parent component using the constructor to
// get a ref to the inner textInput element e.g. if we do
// <constructor ref={el => this.textInput = el} /> this will not
// return a ref to the component, but rather the HTML element by default
ref(textInput.current);
// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
}, [autoFocus, ref, inputCallbackRef]);
What alternative solutions did you explore? (Optional)
NA
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸
@sonialiap @ikevin127 this issue is now 4 weeks old, please consider:
- Finding a contributor to fix the bug
- Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
- If you have any questions, don't hesitate to start a discussion in #expensify-open-source
Thanks!
@dominictb Sorry for the delay in reviewing! Thank you for taking the time to come up with a quality proposal for fixing this 1 month old issue 👴
Dominic's proposal looks good to me. The root cause is well documented and every single point described in the RCA checks-out. The proposed solution fixes the issue accordingly, using the already existing useAutoFocusInput hook, aligning the Android behaviour with the one on iOS -> fulfilling the Expected result of the issue.
🎀👀🎀 C+ reviewed
Triggered auto assignment to @youssef-lr, see https://stackoverflow.com/c/expensify/questions/7972 for more details.
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸
@youssef-lr, @sonialiap, @ikevin127 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!
📣 @ikevin127 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!
📣 @dominictb 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!
Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑💻 Keep in mind: Code of Conduct | Contributing 📖