[$1000] Android chrome does not provide response to click on invite and remove buttons on manage members page

[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!

---

HOLD on #17024

Action Performed:

1. Open the app in android chrome
2. Open settings
3. Open workspaces
4. Open any workspace
5. Open manage members
6. Click on invite or select admin and click on remove to see if there is any background color change on click
7. Follow step 1 - 6 on other platforms like android app, web chrome

Expected Result:

App should change button background color to provide click effect on invite and remove buttons as it does on android app and other platforms

Actual Result:

App does not provide any effect on click of invite and remove buttons on manage members page

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?

• [] Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: v1.3.0-0
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

az_recorder_20230414_173536.1.mp4

no.touch.effect.on.click.invite.remove.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1681487570194549

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01d11290b4368dd353
• Upwork Job ID: 1648010982281056256
• Last Price Increase: 2023-04-17

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~01d11290b4368dd353

[MelvinBot]

Current assignee @tjferriss is eligible for the External assigner, not assigning anyone new.

[MelvinBot]

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

[MelvinBot]

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

[tjferriss]

I tested this same issue on iPhone / Safari and got the same results as the OP. The buttons do not provide a click effect when tapped.

[hasebsiddiqui]

Proposal

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

No touch feedback on 'Invite' and 'Remove' button.

What is the root cause of that problem?

The problem lies in src/pages/workspace/WorkspaceMembersPage.js component in this block of Code

<View style={[styles.w100, styles.flexRow, styles.pt3, styles.ph5]}>
        <Button
          medium
          success
          text={this.props.translate('common.invite')}
          onPress={this.inviteUser}
        />
        <Button
          medium
          danger
          style={[styles.ml2]}
          isDisabled={this.state.selectedEmployees.length === 0}
          text={this.props.translate('common.remove')}
          onPress={this.askForConfirmationToRemove}
        />
</View>

We are using our own Button component here which use Pressable. Now Pressable is a new feature of React Native and does not support Touch Feedback on some platforms yet. So this is a bug in React Native and not in App. And also this bug will be reproduceable in every screen where Button is used and not only on this screen. If we still want to fix this then

1. Replace Pressable in Button component with PressableWithFeedback, a custom component being developed here
2. We can either use TouchableOpacity in our Button component instead of Pressable.
3. Modify our Button component to use animations and provide feedback on Touch like this

 const fadeIn = () => {
    Animated.timing(animated, {
      toValue: 0.1,
      duration: 100,
      useNativeDriver: true,
    }).start();
  };
  const fadeOut = () => {
    Animated.timing(animated, {
      toValue: 1,
      duration: 200,
      useNativeDriver: true,
    }).start();
  };

  return (
    <Pressable onPressIn={fadeIn} onPressOut={fadeOut} {...props}>
      <Animated.View style={{ opacity: animated }}>{children}</Animated.View>
    </Pressable>
  );

4. If we don't want to change our Button component then we can directly use TouchableOpacity in this WorkspaceMembersPage component instead of Button and modify the styles of TouchableOpacity to make it look like our Button.

I recommend option number 1 when the PressableWithFeedback component is developed.

What alternative solutions did you explore? (Optional)

I explored four solutions and I have provided all 4 in the proposal.

[mananjadhav]

Few of the pages/component had TouchableOpacity earlier which we replaced to Button. #13648 so I am not sure if TouchableOpacity is an option for us.

Also @hasebsiddiqui I am a bit confused, the GH issue mentions Mobile Web Android and Safari as the affected platforms, but you've mentioned it's a bug in Native platform.

[roryabraham]

Oh, we should put this on HOLD for #17024

[hasebsiddiqui]

The Pressable doesn't support Touch Feedback at all. Not only on Native but also on Web. The Button code have some custom code to register pressed event

                {({pressed, hovered}) => {
                    const activeAndHovered = !this.props.isDisabled && hovered;
                    return (
                        <OpacityView
                            shouldDim={pressed}
                            style={[
                                styles.button,
                                this.props.small ? styles.buttonSmall : undefined,
                                this.props.medium ? styles.buttonMedium : undefined,
                                this.props.large ? styles.buttonLarge : undefined,
                                this.props.success ? styles.buttonSuccess : undefined,
                                this.props.danger ? styles.buttonDanger : undefined,
                                (this.props.isDisabled && this.props.success) ? styles.buttonSuccessDisabled : undefined,
                                (this.props.isDisabled && this.props.danger) ? styles.buttonDangerDisabled : undefined,
                                (this.props.isDisabled && !this.props.danger && !this.props.success) ? styles.buttonDisable : undefined,
                                (this.props.success && activeAndHovered) ? styles.buttonSuccessHovered : undefined,
                                (this.props.danger && activeAndHovered) ? styles.buttonDangerHovered : undefined,
                                this.props.shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
                                this.props.shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
                                ...this.props.innerStyles,
                            ]}
                        >
                            {this.renderContent()}
                            {this.props.isLoading && (
                                <ActivityIndicator
                                    color={(this.props.success || this.props.danger) ? themeColors.textLight : themeColors.text}
                                    style={[styles.pAbsolute, styles.l0, styles.r0]}
                                />
                            )}
                        </OpacityView>
                    );
                }}

But it doesn’t work correctly on Android Chrome and Safari on Natives because they are slow to register these events so the styles are not visible for them. Web Chrome and Native apps are fast to register these events to that's why we can see them. We need to replace it Animations and Animated.View so that we can properly see animations

[bernhardoj]

Just giving my opinion here. This "issue" happens on all of our touchable/pressable component. I don't know why the reported issue only specifically mentioned the Invite/Remove button while we can clearly see at the recording video, the feedback is also not applied when they clicked on the Avatar/Settings icon.

The Pressable doesn't support Touch Feedback at all.

Pressable supports it by passing the pressed state to the children.

Replacing it with TouchableOpacity won't make a difference.

This feedback "issue" also happens on web/desktop if you click the button using touchpad. Note that it only happens when we lift our finger very quick. Reading from the source code, looks like there is a intended delay (at least 50ms) before the feedback is shown. Here is the commit.

We can set the delay with delayPressIn props, but the value can't be lower than 50ms.

Edit: you can play around by changing the delayPressIn value and see the feedback will be delayed by the amount of the delayPressIn.

[MelvinBot]

@mananjadhav, @tjferriss, @roryabraham Whoops! This issue is 2 days overdue. Let's get this updated quick!

[roryabraham]

This is still on HOLD. I think my plan here is to use PressableWithFeedback, a custom component being developed here

[hasebsiddiqui]

Proposal

Updated

I have updated my original proposal to include PressableWithFeedback component.

[mananjadhav]

This is still on Hold because of the open PR right?

[roryabraham]

yep

[roryabraham]

Even though that PR has been merged, this should be on HOLD for #17024

[roryabraham]

Still on HOLD, making this a weekly in the meantime.

[tjferriss]

Looks like we're still on hold for #17024

[tjferriss]

@roryabraham this is issue still on hold for #17024?

[roryabraham]

@tjferriss I verified this is now fixed. Please pay out the issue reporting bonus to @dhanashree-sawant then close this issue.

[tjferriss]

@dhanashree-sawant I've invited you to the job in Upworks for payment of the reporting bonus: https://www.upwork.com/jobs/~01768738e5cb6b2307.

[dhanashree-sawant]

Hi @tjferriss, thanks I have accepted the invite.

[roryabraham]

@dhanashree-sawant I paid out the contract and ended it. I don't normally handle the upwork pieces so let me know if I made any mistakes. Thanks!