[HOLD for payment 2022-01-11] Mobile apps - User is unable to paste an amount in the IOU amount modal

[isagoico]

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. Copy any amount to the clipboard (e.g 1232.32)
2. Navigate to a conversation in NewDot
3. Request money
4. Try to paste the amount you copied before in the mount field

Expected Result:

User is able to paste content in the amount field in mobile

Actual Result:

User is unable to paste content in the amount field in mobile

Workaround:

Enter the amount manually

Platform:

Where is this issue occurring?

• iOS
• Android

Version Number: 1.1.14-0

Reproducible in staging?: Yes
Reproducible in production?: Yes

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

Issue reported by: @quinthar
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1636688055149900

View all open jobs on GitHub

[MelvinBot]

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

[MelvinBot]

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

[akshayasalvi]

Proposal

This is happening because we're using a Text component and not TextInput for mobile devices.

My solution is to remove the isSmallScreenWidth check and keep only one block:

<TextInputAutoWidth
        inputStyle={styles.iouAmountTextInput}
        textStyle={styles.iouAmountText}
        value={this.state.amount}
        onChangeText={this.updateAmount}
        ref={el => this.textInput = el}
        placeholder="0"
        showSoftInputOnFocus={false}
    />

I've added showSoftInputOnFocus which ensures that the keyboard doesn't show up on input focus in the mobile apps and our number pad is being able to be used.

[rushatgabhane]

@akshayasalvi Ideally showSoftInputOnFocus=false would work.

But it has a bug. When you re-open the app from background, the system keyboard shows up!

screen-20211114-073353.mp4

[akshayasalvi]

Thanks for reporting @rushatgabhane.

I’ll probably also add this: (yet to test on a real device):

<TouchableWithoutFeedback onPress={Keyboard.dismiss} > <TextInput /> </TouchableWithoutFeedback>

[rushatgabhane]

Nope, that didn't help.

[akshayasalvi]

Okay, thanks for notifying me. I'll check something that works on the background too.

[Christinadobrzyn]

I don't see a duplicate job in Expensify/App so created job in Upwork:

Internal job posting - https://www.upwork.com/ab/applicants/1460125754131181568/job-details
External job posting - https://www.upwork.com/jobs/~0192adfe14df539b43

[elemanhillary]

Initially you can also use a text component to grab things off the clipboard. I have a simple solution

Solution 1

• Use a text input

Solution 2

• Grab text from clipboard

[Amarpsp10]

Proposal

I have one solution for this without using the TextInput component
we can access the Clipboard value by using @react-native-community/clipboard

 import Clipboard from '../../../libs/Clipboard/index.native'
 .....
 async componentDidMount() {
    .....
    const copiedText = await Clipboard.getString();
    this.setState({copied : copiedText});
}

I tested this above code it's perfectly working !
we will update state every time when user switches App or pages,
after getting the Copied Text, Amount Page will render a suggestion to paste the copied text,

here I created a example image to show how it is going to look like

ke

when user click on this suggested text it will update the Text component.
we need to handle some other things also like

• showing suggestion only one time
• Checking for new copied text by comparing already exist one in state

[tgolen]

Thanks for the proposals!

@akshayasalvi I think ideally, I like your proposal the most. It seems the most simple and the most "best practice" way. Is it possible to find a solution to that background bug?

@elemanhillary It sounds like you are proposing similar things as the others, but I would need to see a more detailed explanation of what solution you would recommend as well as how it would be accomplished.

@Amarpsp10 It looks like you've explored the solution for accessing contents from the clipboard well, however, I think it feels overly complex (needing to now deal with edge cases with copied text) and so maybe not a great primary solution. For example, if I had previously copied something unrelated into the clipboard, I would not want it automatically pasted into the field (eg. the string "Hi Ronald McDonald!"). Then, if you're presenting the user with a choice of pasting in the copied text, that's an entirely new UX and UI that needs to be considered.

[akshayasalvi]

@tgolen Yeah. On it.

[tgolen]

Cool, proposal looks good to me (though I assume the code will be changed to match our style better in the PR).

I personally don't think that TextInputWithoutKeyboard is necessary at this time, so I think we can do without it for now.

@Christinadobrzyn can you please hire @akshayasalvi for this?

[akshayasalvi]

code will be changed to match our style better in the PR

Yeah I just did a quick test run in a small RN app.

[Christinadobrzyn]

Hired @akshayasalvi in Upwork 🎉

[MelvinBot]

📣 @akshayasalvi You have been assigned to this job by @Christinadobrzyn!
Please apply to this job in Upwork 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 📖

[Christinadobrzyn]

Hi @akshayasalvi! Do you have an update for us on when we can expect the PR for this one? I don't see it yet but maybe I'm missing something. Thank you!

[akshayasalvi]

@Christinadobrzyn Testing and pushing today.

[tgolen]

PR has been submitted and is under review.

[botify]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.24-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Changed the Amount Text to TextInput #6811

If no regressions arise, payment will be issued on 2022-01-11. 🎊

[akshayasalvi]

@parasharrajat @tgolen There's an issue with this PR and I need some help. #7023 linked issue shows two keyboards in Android Chrome.

It seems that inputmode is not working as expected with keyboardType for react-native-web.TextInput component. There is no handling for inputMode, and our inputmode/inputMode gets ignored.

https://github.com/necolas/react-native-web/blob/081a128db325f9ee10c359e304e9f6cc7f4f9c56/packages/react-native-web/src/exports/TextInput/index.js#L136-L161

How should we proceed with this? Should we be updating react-native-web

[parasharrajat]

Sorry, I was not a reviewer of the PR. inputMode is a browser attribute an RN-web only supports props that are part of native RN spec. So you would have to use setNativeProps to set this. It can't be passed as inputMode prop. Try that and let me know if that does not work.

[akshayasalvi]

I tried on the emulator it isn't working. I'll try to test on a real device.

[Christinadobrzyn]

Hi there! @parasharrajat sorry to ask but can you give me an update on paying this? We're past the original Hold of Payment date but it looks like there might be other PRs in the works? Can you link the PR to track for paying this (if it's different). Thanks!

[parasharrajat]

@Christinadobrzyn You should track #6811 for payment.

[Christinadobrzyn]

After 7 days in production without any regressions so paid @akshayasalvi in Upwork for the job!

@parasharrajat were you the C+ on this project?

[parasharrajat]

@Christinadobrzyn No, but I helped in finding the right solution.