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.

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

Block Virtual keyboard on Request Money Page #7126

Merged
merged 3 commits into from
Jan 12, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -1,45 +1,47 @@
import React from 'react';
import {View} from 'react-native';
import PropTypes from 'prop-types';
import {
View,
AppState,
Keyboard,
} from 'react-native';
import _ from 'underscore';
import styles from '../styles/styles';
import * as StyleUtils from '../styles/StyleUtils';
import Text from './Text';
import TextInputFocusable from './TextInputFocusable';
import styles from '../../styles/styles';
import * as StyleUtils from '../../styles/StyleUtils';
import Text from '../Text';
import TextInputFocusable from '../TextInputFocusable';
import * as baseTextInputAutoWidthWithoutKeyboardPropTypes from './baseTextInputAutoWidthWithoutKeyboardPropTypes';

const propTypes = {
/** The value of the comment box */
value: PropTypes.string.isRequired,

/** A ref to forward to the text input */
forwardedRef: PropTypes.func.isRequired,

/** General styles to apply to the text input */
// eslint-disable-next-line react/forbid-prop-types
inputStyle: PropTypes.object,

/** Styles to apply to the text input */
// eslint-disable-next-line react/forbid-prop-types
textStyle: PropTypes.object.isRequired,

/** Optional placeholder to show when there is no value */
placeholder: PropTypes.string,
};

const defaultProps = {
inputStyle: {},
placeholder: '',
};

class TextInputAutoWidth extends React.Component {
class BaseTextInputAutoWidthWithoutKeyboard extends React.Component {
constructor(props) {
super(props);
this.dismissKeyboardWhenBackgrounded = this.dismissKeyboardWhenBackgrounded.bind(this);

this.state = {
textInputWidth: 0,
};
}

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

componentWillUnmount() {
if (!this.appStateSubscription) {
return;
}
this.appStateSubscription.remove();
}

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

render() {
const propsWithoutStyles = _.omit(this.props, ['inputStyle', 'textStyle']);
return (
Expand All @@ -48,6 +50,7 @@ class TextInputAutoWidth extends React.Component {
<TextInputFocusable
style={[this.props.inputStyle, StyleUtils.getAutoGrowTextInputStyle(this.state.textInputWidth)]}
ref={this.props.forwardedRef}
showSoftInputOnFocus={false}
/* eslint-disable-next-line react/jsx-props-no-spreading */
{...propsWithoutStyles}
/>
Expand All @@ -69,10 +72,10 @@ class TextInputAutoWidth extends React.Component {
}
}

TextInputAutoWidth.propTypes = propTypes;
TextInputAutoWidth.defaultProps = defaultProps;
BaseTextInputAutoWidthWithoutKeyboard.propTypes = baseTextInputAutoWidthWithoutKeyboardPropTypes.propTypes;
BaseTextInputAutoWidthWithoutKeyboard.defaultProps = baseTextInputAutoWidthWithoutKeyboardPropTypes.defaultProps;

export default React.forwardRef((props, ref) => (
/* eslint-disable-next-line react/jsx-props-no-spreading */
<TextInputAutoWidth {...props} forwardedRef={ref} />
<BaseTextInputAutoWidthWithoutKeyboard {...props} forwardedRef={ref} />
));
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import PropTypes from 'prop-types';

const propTypes = {
/** The value of the comment box */
value: PropTypes.string.isRequired,

/** A ref to forward to the text input */
forwardedRef: PropTypes.func.isRequired,

/** General styles to apply to the text input */
// eslint-disable-next-line react/forbid-prop-types
inputStyle: PropTypes.object,

/** Styles to apply to the text input */
// eslint-disable-next-line react/forbid-prop-types
textStyle: PropTypes.object.isRequired,

/** Optional placeholder to show when there is no value */
placeholder: PropTypes.string,
};

const defaultProps = {
inputStyle: {},
placeholder: '',
};

export {propTypes, defaultProps};
30 changes: 30 additions & 0 deletions src/components/TextInputAutoWidthWithoutKeyboard/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from 'react';
import BaseTextInputAutoWidthWithoutKeyboard from './BaseTextInputAutoWidthWithoutKeyboard';
import * as baseTextInputAutoWidthWithoutKeyboardPropTypes from './baseTextInputAutoWidthWithoutKeyboardPropTypes';

class TextInputAutoWidthWithoutKeyboard extends React.Component {
componentDidMount() {
this.textInput.setNativeProps({inputmode: 'none'});
}

render() {
return (
<BaseTextInputAutoWidthWithoutKeyboard
// eslint-disable-next-line react/jsx-props-no-spreading
{...this.props}
ref={(el) => {
this.textInput = el;
this.props.forwardedRef(el);
}}
/>
);
}
}

TextInputAutoWidthWithoutKeyboard.propTypes = baseTextInputAutoWidthWithoutKeyboardPropTypes.propTypes;
TextInputAutoWidthWithoutKeyboard.defaultProps = baseTextInputAutoWidthWithoutKeyboardPropTypes.defaultProps;

export default React.forwardRef((props, ref) => (
/* eslint-disable-next-line react/jsx-props-no-spreading */
<TextInputAutoWidthWithoutKeyboard {...props} forwardedRef={ref} />
));
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react';
import BaseTextInputAutoWidthWithoutKeyboard from './BaseTextInputAutoWidthWithoutKeyboard';
import * as baseTextInputAutoWidthWithoutKeyboardPropTypes from './baseTextInputAutoWidthWithoutKeyboardPropTypes';

const TextInputAutoWidthWithoutKeyboard = props => (
<BaseTextInputAutoWidthWithoutKeyboard
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
ref={props.forwardedRef}
/>
);

TextInputAutoWidthWithoutKeyboard.propTypes = baseTextInputAutoWidthWithoutKeyboardPropTypes.propTypes;
TextInputAutoWidthWithoutKeyboard.defaultProps = baseTextInputAutoWidthWithoutKeyboardPropTypes.defaultProps;
TextInputAutoWidthWithoutKeyboard.displayName = 'TextInputAutoWidthWithoutKeyboard';

export default React.forwardRef((props, ref) => (
/* eslint-disable-next-line react/jsx-props-no-spreading */
<TextInputAutoWidthWithoutKeyboard {...props} forwardedRef={ref} />
));
27 changes: 2 additions & 25 deletions src/pages/iou/steps/IOUAmountPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import {
View,
TouchableOpacity,
InteractionManager,
AppState,
Keyboard,
} from 'react-native';
import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
Expand All @@ -13,14 +11,14 @@ import ONYXKEYS from '../../../ONYXKEYS';
import styles from '../../../styles/styles';
import BigNumberPad from '../../../components/BigNumberPad';
import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
import TextInputAutoWidth from '../../../components/TextInputAutoWidth';
import Navigation from '../../../libs/Navigation/Navigation';
import ROUTES from '../../../ROUTES';
import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
import compose from '../../../libs/compose';
import Button from '../../../components/Button';
import Text from '../../../components/Text';
import CONST from '../../../CONST';
import TextInputAutoWidthWithoutKeyboard from '../../../components/TextInputAutoWidthWithoutKeyboard';

const propTypes = {
/** Whether or not this IOU has multiple participants */
Expand Down Expand Up @@ -79,7 +77,6 @@ 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 @@ -88,10 +85,6 @@ class IOUAmountPage extends React.Component {

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

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

componentWillUnmount() {
if (!this.appStateSubscription) {
return;
}
this.appStateSubscription.remove();
}

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

/**
* Focus text input
*/
Expand Down Expand Up @@ -209,16 +188,14 @@ class IOUAmountPage extends React.Component {
{lodashGet(this.props.currencyList, [this.props.iou.selectedCurrencyCode, 'symbol'])}
</Text>
</TouchableOpacity>
<TextInputAutoWidth
<TextInputAutoWidthWithoutKeyboard
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]}>
Expand Down