Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Changed the Amount Text to TextInput #6811

Merged
merged 6 commits into from
Dec 27, 2021
Merged

Changed the Amount Text to TextInput #6811

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9e9a7e8
Changed the Amount Text to TextInput
akshayasalvi Dec 17, 2021
e6d95aa
Added handling for mobile web
akshayasalvi Dec 18, 2021
e538737
Changed inputMode to inputmode
akshayasalvi Dec 18, 2021
6ce2af4
Removed extra spaces
akshayasalvi Dec 18, 2021
0316560
Merge branch 'main' of github-personal:akshayasalvi/App into allow-am…
akshayasalvi Dec 27, 2021
5be1b9a
Renamed function for app state change
akshayasalvi Dec 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 32 additions & 18 deletions src/pages/iou/steps/IOUAmountPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import {
View,
TouchableOpacity,
InteractionManager,
AppState,
Keyboard,
} from 'react-native';
import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
Expand Down Expand Up @@ -77,6 +79,7 @@ class IOUAmountPage extends React.Component {
this.updateAmount = this.updateAmount.bind(this);
this.stripCommaFromAmount = this.stripCommaFromAmount.bind(this);
this.focusTextInput = this.focusTextInput.bind(this);
this.dismissKeyboardWhenBackgrounded = this.dismissKeyboardWhenBackgrounded.bind(this);

this.state = {
amount: props.selectedAmount,
Expand All @@ -85,6 +88,10 @@ class IOUAmountPage extends React.Component {

componentDidMount() {
this.focusTextInput();
this.unsubscribeAppStateSubscription = AppState.addEventListener(
'change',
this.dismissKeyboardWhenBackgrounded,
);
}

componentDidUpdate(prevProps) {
Expand All @@ -95,6 +102,20 @@ class IOUAmountPage extends React.Component {
this.focusTextInput();
}

componentWillUnmount() {
if (!this.unsubscribeAppStateSubscription) {
return;
}
this.unsubscribeAppStateSubscription();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This function does not return a method to unsubscribe...

https://reactnative.dev/docs/appstate#addeventlistener

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this.unsubscribeAppStateSubscription.remove()

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yes, good catch. I am seeing some console errors for this. @akshayasalvi can you please fix this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi,
Okay sure. I'll do that.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No worries, we've fixed it already. This was taken care of in #6909

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the help

}

dismissKeyboardWhenBackgrounded(nextAppState) {
if (!nextAppState.match(/inactive|background/)) {
return;
}
Keyboard.dismiss();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👋 Coming from #26505

Keyboard.dismiss was added as a fix #6285 (comment) where in native, showSoftInputOnFocus does not work if the app is backgrounded, then foregrounded
This was causing #26505 on Desktop
We resolved this by moving this logic to a platform-specific file, so it's called only on native platforms (since this bug is present only on native)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love that. Thank you for moving it to a platform-specific file!

}

/**
* Focus text input
*/
Expand Down Expand Up @@ -188,24 +209,17 @@ class IOUAmountPage extends React.Component {
{lodashGet(this.props.currencyList, [this.props.iou.selectedCurrencyCode, 'symbol'])}
</Text>
</TouchableOpacity>
{this.props.isSmallScreenWidth
? (
<Text
style={styles.iouAmountText}
>
{this.state.amount}
</Text>
) : (
<TextInputAutoWidth
inputStyle={styles.iouAmountTextInput}
textStyle={styles.iouAmountText}
onChangeText={this.updateAmount}
ref={el => this.textInput = el}
value={this.state.amount}
placeholder="0"
keyboardType={CONST.KEYBOARD_TYPE.NUMERIC}
/>
)}
<TextInputAutoWidth
inputStyle={styles.iouAmountTextInput}
textStyle={styles.iouAmountText}
onChangeText={this.updateAmount}
ref={el => this.textInput = el}
value={this.state.amount}
placeholder="0"
keyboardType={CONST.KEYBOARD_TYPE.NUMERIC}
showSoftInputOnFocus={false}
inputmode="none"
/>
</View>
<View style={[styles.w100, styles.justifyContentEnd]}>
{this.props.isSmallScreenWidth
Expand Down