[$250] iOS -Chat - When using extension in compose box the focus disappears

[kavimuru]

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:

1. Open the app
2. Log in with any account
3. Navigate to any conversation
4. Focus on the compose box and start typing in a quick manner
5. When the arrows appear to enlarge the compose box - tap on them

Expected Result:

User can continue typing.

Actual Result:

Focus disappears from compose box.

Workaround:

unknown

Platform:

Where is this issue occurring?

• iOS

Version Number: v1.2.15-2
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:
https://user-images.githubusercontent.com/43996225/195930916-7e012d5d-6bff-4dd6-a1c5-4694d84f18d7.mp4

Expensify/Expensify Issue URL:
Issue reported by: Applause internal team
Slack conversation:

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @abekkala (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @mananjadhav (External)

[melvin-bot]

Triggered auto assignment to @stitesExpensify (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[hungvu193]

Proposal
We didn't focus the text input again after expand or collapse so this issue happened.

Solution
Add the input focus after press expand or collapse in this file:

App/src/pages/home/report/ReportActionCompose.js

Lines 560 to 586 in 363d98f

	{(!this.props.isComposerFullSize && this.state.isFullComposerAvailable) && (
	<Tooltip text={this.props.translate('reportActionCompose.expand')}>
	<TouchableOpacity
	onPress={(e) => {
	e.preventDefault();
	Report.setIsComposerFullSize(this.props.reportID, true);
	}}
	style={styles.composerSizeButton}
	underlayColor={themeColors.componentBG}
	disabled={isBlockedFromConcierge}
	>
	<Icon src={Expensicons.Expand} />
	</TouchableOpacity>
	</Tooltip>
	)}
	<Tooltip text={this.props.translate('reportActionCompose.addAction')}>
	<TouchableOpacity
	onPress={(e) => {
	e.preventDefault();
	this.setMenuVisibility(true);
	}}
	style={styles.chatItemAttachButton}
	underlayColor={themeColors.componentBG}
	disabled={isBlockedFromConcierge}
	>
	<Icon src={Expensicons.Plus} />
	</TouchableOpacity>

For collapse:

          <Tooltip text={this.props.translate('reportActionCompose.collapse')}>
              <TouchableOpacity
                  onPress={(e) => {
                      e.preventDefault();
                      Report.setIsComposerFullSize(this.props.reportID, false);
+                    this.textInput.focus();
                  }}
                  style={styles.composerSizeButton}
                  underlayColor={themeColors.componentBG}
                  disabled={isBlockedFromConcierge}
              >
                  <Icon src={Expensicons.Collapse} />
              </TouchableOpacity>
          </Tooltip>

      )}
                                                              

For expand:

                           <Tooltip text={this.props.translate('reportActionCompose.expand')}>
                                <TouchableOpacity
                                    onPress={(e) => {
                                        e.preventDefault();
                                        Report.setIsComposerFullSize(this.props.reportID, true);
+                                      this.textInput.focus();
                                    }}
                                    style={styles.composerSizeButton}
                                    underlayColor={themeColors.componentBG}
                                    disabled={isBlockedFromConcierge}
                                >
                                    <Icon src={Expensicons.Expand} />
                                </TouchableOpacity>
                            </Tooltip>                                                             

[aimane-chnaif]

Proposal

This is regressed from 981edd9 in this PR
Especially bumping @react-navigation/drawer version from 6.3.0 to 6.5.0 caused this bug.
I tested and confirmed that this bug started appearing from 6.3.1

Solution:
revert @react-navigation/drawer back to 6.3.0 until we fix this weird issue on latest version of this library

cc: @marc (since you did this change)

[melvin-bot]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

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 DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[mountiny]

Please see discussion in this thread. This is related to the the react-drawer update but we would like to fix it without downgrading its version.

[roryabraham]

I'm going to put this issue on HOLD for #11915 since we should have a fix ready-to-go in the upstream react-navigation repo.

[roryabraham]

Taking this over because I have a fix ready for review.

[kbecciv]

Issue is reproducible with build 1.2.18.5, re-opening

11944.mWeb-2.mp4

Recording.1498.mp4

[mountiny]

I think this has been reported much before the react-drawer change, cant find the link right now :(

[aimane-chnaif]

I am not able to reproduce this in v1.2.18.5 on native apps.
For web, the issue existed from the beginning: #11093

[mountiny]

Oh, there we go, thanks!

[techievivek]

So I think for the scope of this issue we have already implemented a fix, right?

[roryabraham]

Closing this out, it's fixed