Skip to content

Fix: portion of text shown when changing IOU value #27613

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

Merged
mountiny merged 7 commits into from
Sep 25, 2023
Merged

Fix: portion of text shown when changing IOU value #27613

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e052a02
Fix: portion of text shown when changing IOU value
neg-0 Sep 15, 2023
19ea447
Merge branch 'Expensify:main' into main
neg-0 Sep 16, 2023
b294af5
Merge branch 'Expensify:main' into main
neg-0 Sep 17, 2023
f5eb835
Fixed rendering of BaseTextInput using autoGrow
neg-0 Sep 19, 2023
665740f
Removed 32 pixel margin on iouAmountText
neg-0 Sep 21, 2023
f855032
Added additional autoGrow width for Safari browser
neg-0 Sep 21, 2023
ccc8175
Fixed file linting
neg-0 Sep 22, 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
11 changes: 9 additions & 2 deletions src/components/TextInput/BaseTextInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import isInputAutoFilled from '../../libs/isInputAutoFilled';
import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
import withLocalize from '../withLocalize';
import useNativeDriver from '../../libs/useNativeDriver';
import * as Browser from '../../libs/Browser';

function BaseTextInput(props) {
const inputValue = props.value || props.defaultValue || '';
Expand Down Expand Up @@ -399,11 +400,17 @@ function BaseTextInput(props) {
This Text component is intentionally positioned out of the screen.
*/}
{(props.autoGrow || props.autoGrowHeight) && (
// Add +2 to width so that the first digit of amount do not cut off on mWeb - https://github.com/Expensify/App/issues/8158.
// Add +2 to width on Safari browsers so that text is not cut off due to the cursor or when changing the value
// https://github.com/Expensify/App/issues/8158
// https://github.com/Expensify/App/issues/26628
<Text
style={[...props.inputStyle, props.autoGrowHeight && styles.autoGrowHeightHiddenInput(width, maxHeight), styles.hiddenElementOutsideOfWindow, styles.visibilityHidden]}
onLayout={(e) => {
setTextInputWidth(e.nativeEvent.layout.width + 2);
let additionalWidth = 0;
if (Browser.isMobileSafari() || Browser.isSafari()) {
additionalWidth = 2;
}
setTextInputWidth(e.nativeEvent.layout.width + additionalWidth);
setTextInputHeight(e.nativeEvent.layout.height);
}}
>
Expand Down