diff --git a/src/components/Composer/index.js b/src/components/Composer/index.js index cbd22cc39dfd..d29e89452e30 100755 --- a/src/components/Composer/index.js +++ b/src/components/Composer/index.js @@ -83,6 +83,9 @@ const propTypes = { /** Whether this is the report action compose */ isReportActionCompose: PropTypes.bool, + /** Whether the sull composer is open */ + isComposerFullSize: PropTypes.bool, + ...withLocalizePropTypes, ...windowDimensionsPropTypes, @@ -111,6 +114,7 @@ const defaultProps = { shouldCalculateCaretPosition: false, checkComposerVisibility: () => false, isReportActionCompose: false, + isComposerFullSize: false, }; /** @@ -161,6 +165,7 @@ function Composer({ checkComposerVisibility, selection: selectionProp, isReportActionCompose, + isComposerFullSize, ...props }) { const textRef = useRef(null); @@ -440,9 +445,9 @@ function Composer({ numberOfLines < maxLines ? styles.overflowHidden : {}, StyleSheet.flatten([style, {outline: 'none'}]), - StyleUtils.getComposeTextAreaPadding(numberOfLinesProp), + StyleUtils.getComposeTextAreaPadding(numberOfLinesProp, isComposerFullSize), ], - [style, maxLines, numberOfLinesProp, numberOfLines], + [style, maxLines, numberOfLinesProp, numberOfLines, isComposerFullSize], ); return ( diff --git a/src/styles/StyleUtils.ts b/src/styles/StyleUtils.ts index 1def6de70819..6e26056e2050 100644 --- a/src/styles/StyleUtils.ts +++ b/src/styles/StyleUtils.ts @@ -1098,11 +1098,18 @@ function getMentionTextColor(isOurMention: boolean): string { /** * Returns padding vertical based on number of lines */ -function getComposeTextAreaPadding(numberOfLines: number): ViewStyle | CSSProperties { +function getComposeTextAreaPadding(numberOfLines: number, isComposerFullSize: boolean): ViewStyle | CSSProperties { let paddingValue = 5; - if (numberOfLines === 1) paddingValue = 9; - // In case numberOfLines = 3, there will be a Expand Icon appearing at the top left, so it has to be recalculated so that the textArea can be full height - if (numberOfLines === 3) paddingValue = 8; + // Issue #26222: If isComposerFullSize paddingValue will always be 5 to prevent padding jumps when adding multiple lines. + if (!isComposerFullSize) { + if (numberOfLines === 1) { + paddingValue = 9; + } + // In case numberOfLines = 3, there will be a Expand Icon appearing at the top left, so it has to be recalculated so that the textArea can be full height + else if (numberOfLines === 3) { + paddingValue = 8; + } + } return { paddingTop: paddingValue, paddingBottom: paddingValue,