Skip to content

Add verticalAlignTop when input has autoGrowHeight to base input component #31777

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
aldo-expensify merged 4 commits into from
Dec 4, 2023
Merged

Add verticalAlignTop when input has autoGrowHeight to base input component #31777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9229246
add vertical align top when input has autoGrowHeight to base input co…
dukenv0307 Nov 23, 2023
9ef37ef
Merge branch 'main' into fix/31197
dukenv0307 Nov 27, 2023
53364bd
remove unuse style
dukenv0307 Nov 27, 2023
aa703f2
resolve conflict
dukenv0307 Dec 4, 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
3 changes: 2 additions & 1 deletion src/components/TextInput/BaseTextInput/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,7 +333,8 @@ function BaseTextInput(props) {
!isMultiline && Browser.isMobileChrome() && {boxSizing: 'content-box', height: undefined},

// Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(styles, textInputHeight, maxHeight),
...(props.autoGrowHeight ? [StyleUtils.getAutoGrowHeightInputStyle(styles, textInputHeight, maxHeight), styles.verticalAlignTop] : []),

// Add disabled color theme when field is not editable.
props.disabled && styles.textInputDisabled,
styles.pointerEventsAuto,
Expand Down
2 changes: 1 addition & 1 deletion src/components/TextInput/BaseTextInput/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,7 +312,7 @@ function BaseTextInput(props) {
!isMultiline && {height, lineHeight: undefined},

// Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(styles, textInputHeight, maxHeight),
...(props.autoGrowHeight ? [StyleUtils.getAutoGrowHeightInputStyle(styles, textInputHeight, maxHeight), styles.verticalAlignTop] : []),
// Add disabled color theme when field is not editable.
props.disabled && styles.textInputDisabled,
styles.pointerEventsAuto,
Expand Down
1 change: 0 additions & 1 deletion src/pages/EditRequestDescriptionPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,6 @@ function EditRequestDescriptionPage({defaultDescription, onSubmit}) {
}}
autoGrowHeight
containerStyles={[styles.autoGrowHeightMultilineInput]}
inputStyle={[styles.verticalAlignTop]}
submitOnEnter={!Browser.isMobile()}
/>
</View>
Expand Down
1 change: 0 additions & 1 deletion src/pages/ReportWelcomeMessagePage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,6 @@ function ReportWelcomeMessagePage(props) {
value={welcomeMessage}
onChangeText={handleWelcomeMessageChange}
autoCapitalize="none"
inputStyle={[styles.verticalAlignTop]}
containerStyles={[styles.autoGrowHeightMultilineInput]}
/>
</View>
Expand Down
1 change: 0 additions & 1 deletion src/pages/iou/MoneyRequestDescriptionPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,6 @@ function MoneyRequestDescriptionPage({iou, route, selectedTab}) {
}}
autoGrowHeight
containerStyles={[styles.autoGrowHeightMultilineInput]}
inputStyle={[styles.verticalAlignTop]}
submitOnEnter={!Browser.isMobile()}
/>
</View>
Expand Down
1 change: 0 additions & 1 deletion src/pages/settings/Security/CloseAccountPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,6 @@ function CloseAccountPage(props) {
label={props.translate('closeAccountPage.enterMessageHere')}
aria-label={props.translate('closeAccountPage.enterMessageHere')}
role={CONST.ACCESSIBILITY_ROLE.TEXT}
inputStyle={[styles.verticalAlignTop]}
containerStyles={[styles.mt5, styles.autoGrowHeightMultilineInput]}
/>
<Text style={[styles.mt5]}>
Expand Down
1 change: 0 additions & 1 deletion src/pages/tasks/NewTaskDescriptionPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,6 @@ function NewTaskDescriptionPage(props) {
autoGrowHeight
submitOnEnter={!Browser.isMobile()}
containerStyles={[styles.autoGrowHeightMultilineInput]}
inputStyle={[styles.verticalAlignTop]}
/>
</View>
</FormProvider>
Expand Down
2 changes: 0 additions & 2 deletions src/pages/tasks/NewTaskDetailsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,9 +113,7 @@ function NewTaskDetailsPage(props) {
autoGrowHeight
submitOnEnter={!Browser.isMobile()}
containerStyles={[styles.autoGrowHeightMultilineInput]}
textAlignVertical="top"
defaultValue={parser.htmlToMarkdown(parser.replace(taskDescription))}
inputStyle={[styles.verticalAlignTop]}
value={taskDescription}
onValueChange={(value) => setTaskDescription(value)}
/>
Expand Down
1 change: 0 additions & 1 deletion src/pages/tasks/TaskDescriptionPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,6 @@ function TaskDescriptionPage(props) {
autoGrowHeight
submitOnEnter={!Browser.isMobile()}
containerStyles={[styles.autoGrowHeightMultilineInput]}
inputStyle={[styles.verticalAlignTop]}
/>
</View>
</FormProvider>
Expand Down
1 change: 0 additions & 1 deletion src/pages/workspace/WorkspaceInviteMessagePage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,6 @@ class WorkspaceInviteMessagePage extends React.Component {
autoCompleteType="off"
autoCorrect={false}
autoGrowHeight
inputStyle={[this.props.themeStyles.verticalAlignTop]}
containerStyles={[this.props.themeStyles.autoGrowHeightMultilineInput]}
defaultValue={this.state.welcomeNote}
value={this.state.welcomeNote}
Expand Down
1 change: 0 additions & 1 deletion src/pages/workspace/WorkspaceNewRoomPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,6 @@ function WorkspaceNewRoomPage(props) {
autoGrowHeight
maxLength={CONST.MAX_COMMENT_LENGTH}
autoCapitalize="none"
textAlignVertical="top"
containerStyles={[styles.autoGrowHeightMultilineInput]}
/>
</View>
Expand Down