Merge pull request #4158 from rdjuric/fixHiddenStyling

Fixes styling for hidden element
Expensify · Jul 22, 2021 · 4d84b6b · 4d84b6b
2 parents 4facad0 + 86d3ae7
commit 4d84b6b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/src/components/TextInputAutoWidth.js b/src/components/TextInputAutoWidth.js
@@ -42,13 +42,15 @@ class TextInputAutoWidth extends React.Component {
     render() {
         const propsWithoutStyles = _.omit(this.props, ['inputStyle', 'textStyle']);
         return (
-            <View>
-                <TextInputFocusable
-                    style={[this.props.inputStyle, getAutoGrowTextInputStyle(this.state.textInputWidth)]}
-                    ref={this.props.forwardedRef}
-                    /* eslint-disable-next-line react/jsx-props-no-spreading */
-                    {...propsWithoutStyles}
-                />
+            <>
+                <View>
+                    <TextInputFocusable
+                        style={[this.props.inputStyle, getAutoGrowTextInputStyle(this.state.textInputWidth)]}
+                        ref={this.props.forwardedRef}
+                        /* eslint-disable-next-line react/jsx-props-no-spreading */
+                        {...propsWithoutStyles}
+                    />
+                </View>
                 {/*
                 Text input component doesn't support auto grow by default.
                 We're using a hidden text input to achieve that.
@@ -61,7 +63,7 @@ class TextInputAutoWidth extends React.Component {
                 >
                     {this.props.value || this.props.placeholder}
                 </Text>
-            </View>
+            </>
         );
     }
 }

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -1647,11 +1647,10 @@ const styles = {
     },
 
     hiddenElementOutsideOfWindow: {
-        position: 'fixed',
+        position: 'absolute',
         top: 0,
         left: 0,
         opacity: 0,
-        transform: 'translateX(-100%)',
     },
 
     growlNotificationWrapper: {