[HOLD for payment 2022-01-11] IOU - Cursor is set to pointer in IOU preview - Reported by: @Tushu17

[mvtglobally]

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. Login
2. Request money from account B
3. Click on amount on top to open details window
4. Hover over amount and user details

Expected Result:

User should not see pointer as this section is not clickable

Actual Result:

User can see pointer in IOU details but there is no action occurring hen clicking on it

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.18-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify.bug.mp4

Expensify/Expensify Issue URL:
Issue reported by: @Tushu17
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1638989787379500

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @kadiealexander (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[MelvinBot]

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

[PrashantMangukiya]

Proposed Solution: (If considered as external)

Here is the problem: There is a styles.iouPreviewBox at line 106 this style consist cursor as pointer, So it shows pointer cursor either `props.onPreviewPressed' passed or not.

App/src/components/ReportActionItem/IOUPreview.js

Lines 105 to 109 in c86847d

	<TouchableWithoutFeedback onPress={props.onPreviewPressed}>
	<View style={styles.iouPreviewBox}>
	{reportIsLoading
	? <ActivityIndicator style={styles.iouPreviewBoxLoading} color={themeColors.text} />
	: (

---

Solution1: This is simple solution.
We have to set cursor style to default if props.onPreviewPressed not passed. So we have to change line 106 within IOUPreview.js as under.

  <View style={[styles.iouPreviewBox, !_.isFunction(props.onPreviewPressed) && styles.cursorDefault]}>

Also add cursorDefault style within styles.js as under:

cursorDefault: {
    cursor: 'default',
},

---

Solution 2: This is slightly complex solution.
We can conditionally render TouchableWithoutFeedback component as shown under. i.e. If props.onPreviewPressed passed then we will wrap TouchableWithoutFeedback component, otherwise not.

So implementation will be as under. i.e. Prepare Wrapper and replace <TouchableWithoutFeedback onPress={props.onPreviewPressed}> with <Wrapper onPress={props.onPreviewPressed}>

// Add this wrapper
const Wrapper = ({children, onPress}) => {
    if (onPress) {
        return (
            <TouchableWithoutFeedback onPress={onPress}>
                {children}
            </TouchableWithoutFeedback>
        );
    }
    return children;
};

// Old code 
<TouchableWithoutFeedback onPress={props.onPreviewPressed}>
  <View style={styles.iouPreviewBox}>
    ....
   </View>
</TouchableWithoutFeedback>

// Use this wrapper
<Wrapper onPress={props.onPreviewPressed}>
  <View style={[styles.iouPreviewBox, !_.isFunction(props.onPreviewPressed) && styles.cursorDefault]}>
   ...
  </View>
</Wrapper>

Also add cursorDefault style within styles.js as under:

cursorDefault: {
    cursor: 'default',
},

Below is the screen record with this implementation, it gives same result either we use solution1 or solution2

ScreenRecording6693.mov

[parasharrajat]

Does not hurt in my opinion.