Skip to content

IOU - digit appears cutoff for a moment when entering a digit before decimal point #18579

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

Closed
wants to merge 6 commits into from
Closed

IOU - digit appears cutoff for a moment when entering a digit before decimal point #18579

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9fad803
IOU - digit appears cutoff for a moment when entering a digit before …
narefyev91 May 8, 2023
3c4a37a
Add expected behaviour for web browser
narefyev91 May 15, 2023
ae5eaad
Merge branch 'main' into cut-of-issue-with-dynamic-width
narefyev91 May 15, 2023
e4c70a3
Merge branch 'main' into cut-of-issue-with-dynamic-width
narefyev91 May 25, 2023
f40d168
Naming and earlier set input value
narefyev91 May 25, 2023
710d9da
prettier fix
narefyev91 May 25, 2023
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
28 changes: 24 additions & 4 deletions src/components/TextInput/BaseTextInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ class BaseTextInput extends Component {

// Value should be kept in state for the autoGrow feature to work - https://github.com/Expensify/App/pull/8232#issuecomment-1077282006
value,
hiddenInputValue: value,
};

this.input = null;
Expand Down Expand Up @@ -67,13 +68,23 @@ class BaseTextInput extends Component {
this.input.focus();
}

componentDidUpdate(prevProps) {
componentDidUpdate(prevProps, prevState) {
// Activate or deactivate the label when value is changed programmatically from outside
const inputValue = _.isUndefined(this.props.value) ? this.input.value : this.props.value;
if ((_.isUndefined(inputValue) || this.state.value === inputValue) && _.isEqual(prevProps.selection, this.props.selection)) {
return;
}

if (this.props.autoGrow && this.props.shouldWaitWidthCalculation) {
if (inputValue !== this.state.hiddenInputValue) {
this.setState({hiddenInputValue: inputValue, selection: this.props.selection});
}

if (prevState.textInputWidth === this.state.textInputWidth) {
return;
}
}

// eslint-disable-next-line react/no-did-update-set-state
this.setState({value: inputValue, selection: this.props.selection});

Expand Down Expand Up @@ -147,7 +158,9 @@ class BaseTextInput extends Component {
if (this.props.onInputChange) {
this.props.onInputChange(value);
}
this.setState({value});
if (!this.props.autoGrow || !this.props.shouldWaitWidthCalculation) {
this.setState({value});
}
Comment on lines +161 to +163
Copy link
Contributor

@aldo-expensify aldo-expensify May 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

I have been playing around with this PR to try to avoid this bug, and I'm pretty sure that this is the change causing it.

When the input is full and you type a new digit, value comes with that new digit, and is longer than the permitted value, but we used to set it in the state anyway. Then, componentDidUpdate is called and the value coming from the props is the truncated version. Since the truncated value is different than the state.value, we set the truncated value in the state.

With this change, we don't set the longer than permitted value in the state immediately as we used to, and we end up rendering the input with an old state.value because we are waiting for the width to be calculated.

I don't understand fully the problem, but I think it is related to 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.

@aldo-expensify yes you are right that we set state immediately without waiting width calculation - this is the issue we currently have - and to avoid this we should not use state variable for input until width will be calculated

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@aldo-expensify And also to be clear about render logic:
Why bug with jumping cursor appears - we do not use state value to save longer value - we pass it directly to src/pages/iou/steps/MoneyRequestAmountPage.js - inside that page - there is a set state - which cut un needed symbol - put in state and fire re-render.
In BaseTextInput - we receive that value - and compare with value which we have in state
Both are equal - and we do not make any changes in setState - because we get here

        if ((_.isUndefined(inputValue) || this.state.value === inputValue) && _.isEqual(prevProps.selection, this.props.selection)) {
            return;
        }

But we still in re-render process - because MoneyRequestAmountPage page force re-render by doing setState.
TextInput - get this re-render and check - that value is still the same - but it was detecting keyboard press - and setSelectionChange will be fired here:

                        onSelectionChange={(e) => {
                            if (!this.state.shouldUpdateSelection) {
                                return;
                            }
                            this.setState({selection: e.nativeEvent.selection});
                        }}

And e.nativeEvent.selection will be last position of the element in input

Str.result(this.props.onChangeText, value);
this.activateLabel();
}
Expand Down Expand Up @@ -222,6 +235,8 @@ class BaseTextInput extends Component {
{},
);
const isMultiline = this.props.multiline || this.props.autoGrowHeight;
const inputValue = this.state.value || this.props.placeholder;
const hiddenInputValue = this.state.hiddenInputValue || this.props.placeholder;

return (
<>
Expand Down Expand Up @@ -386,9 +401,14 @@ class BaseTextInput extends Component {
styles.hiddenElementOutsideOfWindow,
styles.visibilityHidden,
]}
onLayout={(e) => this.setState({textInputWidth: e.nativeEvent.layout.width + 2, textInputHeight: e.nativeEvent.layout.height})}
onLayout={(e) =>
this.setState({textInputWidth: e.nativeEvent.layout.width + 2, textInputHeight: e.nativeEvent.layout.height}, () => {
if (!this.props.shouldWaitWidthCalculation) return;
this.setState((prevState) => ({value: prevState.hiddenInputValue, selection: this.props.selection}));
})
}
>
{this.state.value || this.props.placeholder}
{this.props.autoGrowHeight || !this.props.shouldWaitWidthCalculation ? inputValue : hiddenInputValue}
</Text>
)}
</>
Expand Down
4 changes: 4 additions & 0 deletions src/components/TextInput/baseTextInputPropTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,9 @@ const propTypes = {

/** Set the default value to the input if there is a valid saved value */
shouldUseDefaultValue: PropTypes.bool,

/** Indicate whether input should wait until getting calculated width based on value */
shouldWaitWidthCalculation: PropTypes.bool,
};

const defaultProps = {
Expand Down Expand Up @@ -121,6 +124,7 @@ const defaultProps = {
icon: null,
shouldUseDefaultValue: false,
multiline: false,
shouldWaitWidthCalculation: false,
};

export {propTypes, defaultProps};
2 changes: 2 additions & 0 deletions src/components/TextInput/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import _ from 'underscore';
import styles from '../../styles/styles';
import BaseTextInput from './BaseTextInput';
import * as baseTextInputPropTypes from './baseTextInputPropTypes';
import * as BrowserUtils from '../../libs/Browser';

class TextInput extends React.Component {
componentDidMount() {
Expand All @@ -22,6 +23,7 @@ class TextInput extends React.Component {
<BaseTextInput
// eslint-disable-next-line react/jsx-props-no-spreading
{...this.props}
shouldWaitWidthCalculation={BrowserUtils.isMobile()}
Copy link
Contributor

Choose a reason for hiding this comment

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

As @parasharrajat posted, I agree it would be good to investigate this further before just disabling it for desktop. If we don't understand the cause, we may be creating a bug.

innerRef={(el) => {
this.textInput = el;
if (!this.props.innerRef) {
Expand Down